el-thee懒加载删除某条数据 ，el-thee懒加载重置，el-thee革新某个节点 ...

 一、懒加载的tree已经全部睁开，外部点击删除的时候不必要重新睁开点击获取下一层数据

1. <template>
2. <el-tree
3.               ref="tree"
4.               :data="treeData"
5.               :props="defaultProps"
6.               render-after-expand
7.               highlight-current
8.               lazy
9.               :expand-on-click-node="false"
10.               @node-click="handleNodeClick"
11.               :default-expanded-keys="defaultexpanded"
12.               :node-key="defaultProps['id']"
13.               :default-checked-keys="defaultchecked"
14.               :load="loadNode">
15.               <span class="custom-tree-node" slot-scope="{ node }">
16.                 <span v-if="node.level === 1" class="ewf-deptonelevel font16">{{
17.                   node.label
18.                 }}</span>
19.                 <span v-else class="ewf-depttwolevel">{{ node.label }}</span>
20.               </span>
21.             </el-tree>
22. </template>
24. <script>
25. export default {
26.   data() {
27.     return {
28.       treeName: "",
29.       treeHeight: "500px",
30.       treeData: [],
31.       defaultchecked: [],
32.       defaultexpanded: ["all"],
33.       defaultProps: {
34.         children: "children",
35.         label: "categoryName",
36.         id: "iidd",
37.         isLeaf: "leaf",
38.       },
39.     };
40.   },
42.   methods: {
43.     // 点击的时候记录当前 点击的data 和 node
44.     handleNodeClick(data,node) {
45.       this.currentData = data
46.       this.currentNode = node
47.     },
48.    
49.     // tree外部点击删除，并且不用初始化tree
50.     deleteFn(){
51.       // 删除接口调用成功的时候，再调用这个方法
52.       this.$refs.tree.remove(this.data); // 通过节点id找到对应树节点对象
53.     },
54. }   
55. }
56. </script>

复制代码

二、重置懒加载的tree

1.     // 重置的时候调用这个方法
2.     resetAllTree() {
3.       this.node.childNodes = []
4.       // this.node, this.resolve 在 loadNode 获取
5.       this.loadNode(this.node, this.resolve)
6.     },
8.    
10.     // 页面加载完成时，elmement-ui 会默认自动调用一次
11.     loadNode(node, resolve) {
12.       if (node.level === 0) {
13.         // 第一次的时候记录 node, resolve ,重置的时候需要用到
14.         this.node = node
15.         this.resolve = resolve
16.         return resolve([
17.           {
18.             iidd: "all",
19.             categoryName: "全部分类",
20.           },
21.         ]);
22.       } else if (node.level === 1) {
23.         this.getTreeData().then((res) => {
24.           resolve(res);
25.         });
26.       } else {
27.         this.getTreeData(node).then((res) => {
28.           resolve(res);
29.         });
30.       }
31.     },
33. getTreeData(node) {
34.       return new Promise((resolve, reject) => {
35.         let params = {
36.           sourceSystem:this.sourceSystem
37.         }
38.         if(node && node.data && node.data.iidd){
39.           params.iidd = node.data.iidd
40.         }
41.         // 调用接口
42.         retrieveLazyMenus(params).then((res) => {
43.           res.data.forEach(el => {
44.             // hasChildren 接口返回的字段，用来表示是否还有子级数据
45.             el.leaf = !el.hasChildren
46.           })
47.           resolve(res.data);
48.         });
49.       });
50.     },

复制代码

三、如顶部图片所示，给某一项新增子级数据，不初始化tree

1.     // 新增的时候记录当前 点击的data 和 node
2.     handleNodeClick(data,node) {
3.       this.currentData = data
4.       this.currentNode = node
5.     },
7.     // 调用新增接口后，然后再初始化当前节点，而不是初始化整个tree
8.     add(){
9.       // 获取当前节点，key可以在@node-click和:load绑定函数的回调参数node用变量存储后有需要刷新的地方取node.key
10.       let node = this.$refs.tree.getNode(this.currentNode.key);
11.       //  设置未进行懒加载状态
12.       node.loaded = false;
13.       // 重新展开节点就会间接重新触发load达到刷新效果
14.       node.expand();
16.     }

复制代码

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。