-
Vue中使用z-tree插件 —— 点击展开事件异步加载子节点
2018-12-27 11:11:00在vue中使用z-tree插件,执行异步加载时候,API文档提示必须写上。 async: { enable: true, url: "nodes.php", autoParam: ["id", "name"] } ...在vue中使用z-tree插件,执行异步加载时候,API文档提示必须写上。
async: { enable: true, url: "nodes.php", autoParam: ["id", "name"] }
琢磨了好久,写出来的。
首先,要弄清楚这两个事件的方法:
1、节点展开(点击前面那个‘+’号或双击节点)
onExpand:节点展开的事件回调函数
2、节点展开(点击前面那个‘-’号或双击节点)
onCollapse:节点折叠的事件回调函数callback:{ beforeCollapse: beforeCollapse, //用于捕获父节点折叠之前的事件回调函数,并且根据返回值确定是否允许折叠操作 //返回值是 true / false //如果返回 false,zTree 将不会折叠节点,也无法触发 onCollapse 事件回调函数 beforeExpand: beforeExpand, //用于捕获父节点展开之前的事件回调函数,并且根据返回值确定是否允许展开操作 //返回值是 true / false //如果返回 false,zTree 将不会展开节点,也无法触发 onExpand 事件回调函数 onCollapse: onCollapse, //用于捕获节点被折叠的事件回调函数 onExpand: onExpand //用于捕获节点被展开的事件回调函数 }
下面附上代码:
HTML:<template> <div> <div class="question_info_lists"> <div class="tree-box"> <div class="zTreeDemoBackground left"> <ul id="treeDemo" class="ztree"></ul> </div> </div> </div> </div> </template>
JS部分:
export default { name: "zTree", data(){ return{ key:false, setting: { data: { simpleData: { enable: true, idKey: "id", pIdKey: "pId", rootPId: 0, } }, view: { showLine: false, dblClickExpand: false, addDiyDom: this.addDiyDom, nameIsHTML: true, selectedMulti: false }, callback: { onClick: this.onClick, //节点点击事件 onCollapse:this.onCollapse, //点击图标按钮节点 折叠后 异步加载子数据 onExpand:this.zTreeOnAsyncSuccess //点击图标按钮节点 展开后 异步加载子数据 } }, zNodes:[] } }, methods:{ //获取菜单 async freshArea(){ const param ={} const result = await resTagTreeData(param) if(result.code==='200000'){ this.zNodes = result.data.ztreeList //判断是否有子节点--通过isContainSon是否大于0(也就是有终端),添加父节点为true this.zNodes.forEach((item)=>{ if(item.isContainSon === 1){ item.isParent = true; } }) //数据渲染到菜单 $.fn.zTree.init($("#treeDemo"), this.setting, this.zNodes); }else { alert(result.message) } }, //点击节点 onClick(event, treeId, treeNode) { alert(treeNode.Name + ", " + treeNode.name); }, zTreeOnAsyncSuccess(event, treeId, treeNode) { this.addNodes(treeNode); }, //点击展开图标 --加载子菜单 async addNodes(treeNode){ //this.key=false const param = { "id":treeNode.id, 'labelType':treeNode.labelType }; // console.log(param) const treeObj = $.fn.zTree.getZTreeObj("treeDemo"); const parentZNode = treeObj.getNodeByParam("id", treeNode.id, null);//获取指定父节点 const childNodes = treeObj.transformToArray(treeNode);//获取子节点集合 //点击事件后将子节点清空后在进行拼接 treeNode.children = []; //因为子节点还包括组织,所以这里需要筛选一下 if(treeNode.isParent){ const result = await resChildrentreeData(param) if(result.code==='200000'){ const childrenData=eval(result.data.ztreeList) // console.log(childrenData) //判断子节点是否包含子元素 for(var i in childrenData){ if(childrenData[i].isContainSon === 1){ childrenData[i].isParent = true; } }; //console.log(childrenData) treeObj.refresh(); treeObj.addNodes(parentZNode,childrenData, false); //添加节点 //this.key = true }else { alert(reslut.mes) } } } }, mounted(){ this.freshArea() //$.fn.zTree.init($("#treeDemo"), this.setting, this.zNodes); } }
-
异步加载省市区树(vue+el-tree)
2021-01-05 11:16:56html <el-form-item label="门店:" :label-width="formLabelWidth"> <el-tree :props="props" :load="loadNode" node-key="id" ref="tree" highlight-current lazy show-chehtml
<el-form-item label="门店:" :label-width="formLabelWidth"> <el-tree :props="props" :load="loadNode" node-key="id" ref="tree" highlight-current lazy show-checkbox @node-click="handleNodeClick" expand-on-click-node ></el-tree> </el-form-item>
js
data() { return { props: { label: "regionName",//这里是树结构中需显示的数据(即接口返回的需展示在页面上的参数) children: [], isLeaf: "leaf"}, } }, methods: { handleNodeClick(data) { console.log("node", data); }, // 异步树叶子节点懒加载逻辑 loadNode(node, resolve) { // 一级节点处理 if (node.level === 0) { this.requestTree(resolve); } // 其余节点处理 if (node.level === 1 || node.level === 2) { // 注意!把resolve传到你自己的异步中去 this.getIndex(node, resolve); } //该级为获取门店为业务逻辑,获取省市区不需要 if (node.level === 3) { this.getIndexStore(node, resolve); } }, // 首次加载一级节点数据函数 requestTree(resolve) { getFirstRegion().then(res => { if (res.code === 200) { let data = res.data; resolve(data); } else { this.$message.error(res.message); } }).catch(error => { }); }, // 异步加载叶子节点数据函数 getIndex(node, resolve) { getSecondRegion(node.data.id).then(res => { if (res.code === 200) { let data = res.data; resolve(data); } else { this.$message.error(res.message); } }) }, getIndexStore(node, resolve) { getStoreRegionList({customerId: this.customerId, regionId: node.data.id}).then(res => { if (res.code === 200) { let data = []; res.data.map(v => { let obj = {}; obj.regionName = v.storeName; obj.id = v.id; obj.leaf = true; data.push(obj); }); resolve(data); } else { this.$message.error(res.message); } }) }, getCheckedNodes() { console.log(this.$refs.tree.getCheckedNodes()); }, }
-
vue-iview异步加载渲染树
2018-12-14 11:27:41Tree v-show=“curType==‘archive’” :data=“archiveTree” :load-data=“loadData” @on-select-change=“selectChange” :show-check=“false”&amp;gt; data () { return { archiveTree:[],树的...<Tree v-show="curType=='archive'" :data="archiveTree" :load-data="loadData" @on-select-change="selectChange" :show-check="false"> </Tree> data () { return { archiveTree:[],树的集合 id:-1,//根节点 }} mounted() {//生命周期函数,页面刷新时调用此方法初始化树 this._loadData(this.id,(array) =>{ this.archiveTree=array }) }, methods: { loadData (item, callback) {//异步加载的方法 this._loadData(item.id,callback) }, _loadData(code,callback){ //发送请求并且对后台的数据进行处理 this.$axios.get('/api/cate/SelectNode?pcode='+code).then((res)=>{ const array=[] //创建一个数组 console.log(res.data) for(let i=0;i<res.data.length;i++){ let item=res.data[i] array.push(item={id:item.id,title:item.title,loading:false,children:[],source:item})//将返回值赋值给新数组在这里可以给json对象添加属性 if(item.source.leaf) delete item.loading } callback(array) /返回新数组 }) }, selectChange(selectedList){ //获取当前点击的节点 const node = selectedList[selectedList.length - 1] this.$axios.post('/api/cate/SelectTrss', this.qs.stringify({ id: node.id })) .then(res => { const list=[] for(let i=0;i<res.data.length;i++){ let items=res.data[i] list.push(items={title:items.name,type:'text'}) } console.log(list) this.fields= list; }) if(node){ this._loadData(node.id,(res)=>{ if(!res)return //没有子节点则返回 let array=[] res.forEarch(item => {//遍历子节点然后在各子节点上递归调用请求下一层后代 array.push(item) this._loadData(item.id,()=>{ }) node.children=array //挂载子节点 node.expand=true //展开子节点 }) }) } },
-
vue+element-ui异步加载树结构-前端(全)
2020-10-16 12:28:37element-ui异步加载行政区划树 功能:进入页面,左侧显示行政区划树的顶级目录,单击目录左侧的箭头,则向后端发送请求,获得该级目录的子目录;以此类推;点击目录本身,则向后端发请求和右边的列表进行联动; ...element-ui异步加载行政区划树 功能:进入页面,左侧显示行政区划树的顶级目录,单击目录左侧的箭头,则向后端发送请求,获得该级目录的子目录;以此类推;点击目录本身,则向后端发请求和右边的列表进行联动; 首先说后台返回的数据构成:ajax的列表 id-uuid label-名称 ztreeType-(0显示行政区划下的子区划,1显示行政区划下的部门) hasChild-是否有子节点 前端树代码: <el-tree :props="defaultProps" //这个很重要,element-ui的树自带node属性,这个属性要和后端返回的数据映射 :expand-on-click-node="false" :filter-node-method="filterNode" :default-expand-all="false" ref="tree" lazy :load="loadNode" node-key="id" highlight-current @node-click="handleNodeClick" > </el-tree> 属性: defaultProps:{ children:[], label:'label', id:'id', isLeaf:'hasChild' }, 方法: //筛选节点 filterNode(value,data){ if(!value) return true; return data.label.indexOf(value)!==-1; } //节点单击事件 handleNodeClick(data){ this.queryParams.deptId = data.id; getList(); } //异步树叶子节点懒加载逻辑 loadNode(node,resolve){ //此方法是进入页面后自动运行的,两个参数也是默认加载的 //一级节点处理 if(node.level==0){ this.requestTree(resolve); } //其余节点处理 if(node.level>=1){ this.getIndex(node,resolve); } }, //首次加载一级节点数据函数 requestTree(resolve){ regionTree({regionCode:370000}).then(response=>{ response.data.forEach(item=>{ if(item.hasChild=='true'){ item.hasChild = false }else{ item.hasChild = true } }) resolve(response.data) }).catch(err=>{}) }, //异步加载叶子节点函数 getIndex(node,resolve){ regionTree({regionCode:node.key}).then(res=>{ res.data.forEach(item=>{ if(item.hasChild=='true'){ item.hasChild = false }else{ item.hasChild = true } }) resolve(res.data); }).catch(err=>{}) },
-
vue ant-design Tree树结构 同步加载
2020-04-30 15:36:20公司业务需要,让我一个后台,...官网的是异步加载,但是也不可用,这里是没有**return resolve()**这个方法的,和Element UI的写法不同,大家千万不要忘了! 树结构 <a-tree :treeData="treeData" :loadData... -
antdesignvue中defaultExpandedRowKeys无效不能展开所有行defaultExpandAllRows也用不了的异步加载解决方案
2021-02-07 11:11:36分析原因:antdesignvue的前端是一次性渲染的,所以defaultExpandedRowKeys等只在渲染时有效。 解决方法:添加判断v-if你的DataSource长度,如果为0则不渲染。 动态解决方法:在DataSource赋值的时候,使用splice将... -
ElementUI实现异步加载树
2019-08-20 14:21:44路由文件修改 import List from '@/components/list.vue' import Add from '@/components/add...import Tree from '@/components/tree.vue' import AsynTree from '@/components/asyntree.vue' export default{ ro... -
Vue:eliment-ui el-tree动态加载更新
2019-03-28 16:19:00最近在数据源管理功能,需要以树的形式异步展现: 根节点可以新增目录。 目录节点可以新增目录,编辑目录,新增主数据。 主数据节点无操作按钮。 找到element-ui的官方文档,el-tree。(地址:... -
class根据状态 vue_Vue实现一个Tree组件
2020-12-27 10:02:39前言Tree组件在实际应用中非常广泛,例如省市县地域的展现....•实现一个基础版可以显示嵌套数据的Tree组件•点击Tree组件的某一级标签它的下一级数据支持异步加载•Tree组件的节点支持拖拽最终Demo的效果图如下.基... -
Vue实现一个Tree组件
2020-12-26 23:20:39点击Tree组件的某一级标签它的下一级数据支持异步加载 Tree组件的节点支持拖拽 最终Demo的效果图如下. 基础版的Tree 实现一个基础版的Tree组件十分简单,原理就是掌握组件嵌套的使用方法. 外部调用 首先设置外部 -
el-tree-fransfer 是一个基于 VUE 和 element-ui 的树形穿梭框组件,使用前请确认已经引入element-ui! 此组件功能类似于element-ui的transfer组件,但是里面的数据是树形结构! 实际上,el-tree-transfer 依赖的 ...
-
antd-vue tree组件,默认展开所有节点(defaultExpandAll)
2021-03-04 16:08:52v-if="leftModelTree.length" 解决异步加载数据后,展开所有节点失败的问题 :tree-data="leftModelTree" 数据源 :replaceFields="replaceFields" 自定义渲染字段title、key、children :defaultExpandAll="true" ... -
基于vue封装的树形菜单,v-tree
2018-12-03 22:28:17对树形菜单进行封装,实现基本功能,支持单选,多选,以及相关回调函数,和节点操作,目前版本为1.0.0 。 实现功能: 单选、复选、复选是/否级联选择(默认级联选中)、是否...异步加载数据 <... -
vue+element-ui实现树形数据以及数据懒加载
2020-12-01 14:37:52树形数据子节点数据的异步加载 表格上的属性添加 这里需要添加的属性: #直接添加,不需要修改 :tree-props="{children:'children',hasChildren:'hasChildren'}" #函数名称,修改成自己的 :load="loadRecord" #row-... -
详解Vue单元测试case写法
2020-12-12 01:32:18代码地址:https://github.com/MarxJiao/vue-karma-test/tree/spec-demo 测试关注点 对于vue组件,单元测试测试主要关注以下几点: vue组件加载后,各数据模型是否符合预期 定义的方法是否可用 filter是否可用 ... -
选中结果过滤掉叶子节点, 异步加载时需手需提供 isLeaf Boolean false rootName 根节点名称,仅 data 为数组时有效,此时不会默认 String null expandClass 展开收起图标class String vs-expand-icon theme ...
-
Vue的性能优化
2020-09-05 16:44:58Vue的性能优化 ...使用路由懒加载、异步组件 防抖、节流 第三方模块按需导入 长列表滚动到可视区域动态加载 图片懒加载 SEO优化 预渲染 服务端渲染SSR 2、打包优化 压缩代码 Tree Shaking/Scope Hoist -
antd vue中树形控件动态增删改操作
2020-07-22 10:44:30注:此树形结构的操作,不能使用异步加载,否则无法进行实时更新(使用异步加载时,需要通过刷新接口才能动态改变) 实时更新删改的核心代码: searchTree(option, arr, type = 'dele'){ //参数:查找的节点数据、被... -
解决ant design vue中树形控件defaultExpandAll设置无效的问题
2021-01-18 18:35:453.在mounted组件加载的时候给treeNodes的值赋值 结果: 设置defaultExpandAll无效,并不能展开所有节点 原因: defaultExpandAll 仅在组件第一次渲染时有效,不仅仅tree组件,其它组件的defaultXXX值都是这个行为, ... -
你都做过哪些Vue的性能优化
2020-10-03 23:25:04编码阶段 尽量减少data中的数据,data...使用路由懒加载、异步组件 防抖、节流 第三方模块按需导入 长列表滚动到可视区域动态加载 图片懒加载 SEO优化 预渲染 服务端渲染SSR 打包优化 压缩代码 Tree Shaking/Scop -
解决ant design vue树形控件/可展开表格默认展开属性defaultExpandAll/defaultExpandAllRows不生效(采坑...
2020-09-18 15:40:19主要是由于ant-design组件数据是单向流动的,树形控件/表格在第一次渲染时异步加载的数据还未存在。所以用v-if确保数据存在再渲染组件。 <a-row class="tree-box"> <a-col> <a-tree v-if=... -
根节点 async 没有触发
2020-12-26 05:21:43<div><p>根节点设置了async 没有触发异步加载,只有第二层的 async 有效,这个是基于什么考虑呢!还是我这边用得不对吗?</p><p>该提问来源于开源项目:halower/vue-tree</p></div> -
2020-08-21
2020-08-21 16:46:49你都做过哪些Vue的性能优化?...使用路由懒加载、异步组件 防抖、节流 第三方模块按需导入 长列表滚动到可视区域动态加载 图片懒加载 SEO优化 预渲染 服务端渲染SSR 打包优化 压缩代码 Tree Shaking/Scope .. -
嗨,送你一张Web性能优化地图
2021-01-08 14:30:23然后再将剩余部分的CSS用异步的方式加载。可以通过<a href="https://github.com/addyosmani/critical">Critical做到这一点。 <h3>4.4 资源提示(Resource Hints) <p><a href=... -
│ ├── asyncComponent.jsx -------异步加载组件 │ └── commons.js ---------------公用方法 ├── README.md ----------------------README └── tree.md --------------------------项目结构
-
webpack 持久化缓存实践
2020-12-05 02:31:10// 用到异步加载模块 asyncComponent,需要抽离,加载首屏速度 document.getElementById('xxxxx').addEventListener('click', () => { import( /* webpackChunkName: "... -
vuejs+zTree callback没反应,大佬救命
2020-12-15 11:26:14enable: true, // true 表示 开启 异步加载模式 chkboxType: {<!-- --> "Y": "p", "N": "s" }, //被勾选时关联父,取消勾选时关联子... -
2016年3月-前端开发月刊
2020-12-08 19:14:45<div><h2>3月份前端资源分享 ...几种常见的JavaScript混淆和反混淆工具分析实战</a></li><li><a href="http://gold.xitu.io/entry/56dfce84f3609a005536a53a">让图片加载这件事儿变得更美好</a></li><li><a href=...
收藏数
30
精华内容
12