重庆网站制作济南/seo顾问服务四川

1.数据过多时进行懒加载孩子节点，根据层级传参获取后端孩子数据

懒加载主要部分：

1参数:

        :load="loadNode"

         lazy

        :props="defaultProps"

2.defaultProps  需要设置isLeaf: 'isLeaf',去除最后一层孩子节点的展开图表

      defaultProps: {

          children: 'children',

          label: 'label',

          isLeaf: 'isLeaf'

        },

2.增删改时实现局部刷新

主要思路：将展开的层级的node保存当curNode中，在进行添加刷新后调用partialRefreshpartialRefresh（）方法【下面代码】

 partialRefreshpartialRefresh (node) {
      this.mark = true
      node.loaded = false // 设置loaded为false；模拟一次节点展开事件，加载重命名后的新数据；
      node.expand() // 新建子节点是刷新一次本节点的展开请求，而重命名和删除则需要刷新父级节点的 
        的展开事件，可以设置node.parent.loaded = false;node.parent.expand();
    },

完整案例代码（没和后端交互）

<template><div>树形懒加载 局部刷新:添加或者删除节点时,后端需要返回当前节点下的最新的孩子数据<el-tree:props="defaultProps":data="data":load="loadNode"lazy:expand-on-click-node="false":check-on-click-node="true"@node-click="nodeClick"></el-tree><el-button @click="add">添加局部数据</el-button><el-button @click="deletes">删除局部刷新</el-button></div>
</template><script>export default {data() {return {nodeArr:[],mark:false,delete:false,curPath:'',curNode:'',defaultProps: {children: 'children',label: 'label',isLeaf: 'isLeaf'},data: [{label: '一级 1',filedId:'dddd',children:[{}]}, {label: '一级 2',children:[{}]}, {label: '二级 2-2',children:[{}]}],};},methods: {// 模拟删除deletes() {this.delete=truethis.partialRefreshpartialRefresh(this.curNode)},// 模拟添加数据,add() {this.partialRefreshpartialRefresh(this.curNode)},nodeClick (data, node) {console.log('node',node);this.curNode = node},// 删除// 实现局部刷新，在点击弹窗处调用的partialRefreshpartialRefresh (node) {this.mark = truenode.loaded = false // 设置loaded为false；模拟一次节点展开事件，加载重命名后的新数据；node.expand() // 新建子节点是刷新一次本节点的展开请求，而重命名和删除则需要刷新父级节点的 的展开事件，可以设置node.parent.loaded = false;node.parent.expand();},loadNode(node, resolve) {console.log('nodexx',node);this.curNode = nodeif (node.level === 0) {return resolve(this.data);}if (node.level >= 1) {// 设置定时器模拟接口返回孩子数据setTimeout(() => {node.data.children.pop();node.data.children = []// 模拟添加的// if(this.mark) {//   // 模拟添加数据，真正开发应该是后端将当前节点孩子数据返回//   node.data.children.push(//   {//   label: '新添加的孩子',//   filedId:'wwww',//   isLeaf:true,// },// {//   label: '初始的孩子',//   filedId:'wwww',//   isLeaf:true,// },// {//   label: '二级 3-2',//   filedId:'wwww',//   children:[{}]// })// } else {// node.data.children.pop();// node.data.children.push({//   label: '初始的孩子',//   filedId:'wwww',//   isLeaf:true,// },// {//   label: '二级 3-2',//   filedId:'wwww',//   children:[{}]// })// }// 模拟删除if(this.delete) {// 模拟删除数据，真正开发应该是后端将当前节点孩子数据返回node.data.children.push(//   {//   label: '新添加的孩子',//   filedId:'wwww',//   isLeaf:true,// },// {//   label: '初始的孩子',//   filedId:'wwww',//   isLeaf:true,// },{label: '二级 3-2',filedId:'wwww',children:[{}]})} else {node.data.children.pop();node.data.children.push({label: '初始的孩子',filedId:'wwww',isLeaf:true,},{label: '二级 3-2',filedId:'wwww',children:[{}]})}resolve(node.data.children)},3000)}}}};
</script><style></style>