element-el-tree的懒加载+搜索定位+动态树结构，效果如下，每个树都有自己独立的搜索独立的数据

1.需求是懒加载+搜索定位+动态树结构，效果如下，每个树都有自己独立的搜索独立的数据

2.需求清除了下面开始上传代码 树结构是遍历出来的

treeList v-for(item,index) in treeList :key="index" <el-tree :ref="'tree' + item.id" //记录refs使其成为唯一值 class="myscroll tree-content" :data="item.value" //也可以写成 treeList[index].value show-checkbox node-key="id" :current-node-key="currentKey" lazy //懒加载的关键 :load="loadNode" //懒加载的方法 这个方法执行在树列表加载之前 :default-expanded-keys="nIdeidlist" :props="defaultProps" :filter-node-method="filterNode" :expand-on-click-node="false" @node-drag-end="handleDragEnd" @node-drop="handleDrop" draggable > <span class="custom-tree-node" slot-scope="{ node, data }"> <span>{{ node.label }}</span> <span> <el-button type="text" size="mini" @click="() => addNode(node, data)" >添加</el-button > <el-button type="text" size="mini" @click="() => importNode(node, data)" >导入</el-button > <el-button type="text" size="mini" @click="() => handleDelete(node, data)" >删除</el-button > </span> </span></el-tree>

3. JS

loadNode(node, resolve) {　　//node 是树列表的信息结构 // console.log(node);　　//resolve 回调函数 这个回调函数很关键 是把接受值 返回给书列表 :data的关键　　 //第一级的渲染 if (node.level == 0) { //回调到:data=" resolve(node.data)"里面渲染 resolve(node.data); node.resolve = resolve; // console.log(resolve); 　//因为树列表是动态的所以用数组的方式存储回调函数 调用的时候利用索引调用就行了 this.numtreelist.push(resolve); 　　 //大于一级的渲染 } else if (node.level >= 1) { // 调接口渲染 传入回调函数与参数 this.treesonlist( resolve, node.data.id, node.data.treeUid, this.queryParmas.name, "" ); } }, 3.上面大于一级渲染的时候调用了接口 调用的时候也分情况 有搜搜有值的时候 搜索框无值的时候treesonlist(resolve, id, uid, name, attribute, itemdata) { console.log(itemdata); // console.log(resolve, id, uid, name, attribute); if (!attribute) { console.log("搜索无字"); if (itemdata) { this.$nextTick(() => { this.$refs["tree" + itemdata.id][0].store.lazy = true; //这一步是说搜索无字的时候那么就正常渲染 加上 lazy=tree }); } queryAllTreeInfo({ id: id, uid: uid, name: name, attribute: attribute, }).then((res) => { if (res.code == 200) { if (id == 0) { this.nIdeidlist = []; this.treeList[res.data[0].num].value = res.data; } resolve(res.data); } else { this.$message.error("条件错误，服务异常！"); } }); } else { console.log("有字"); if (itemdata) { this.$nextTick(() => { this.$refs["tree" + itemdata.id][0].store.lazy = false; //这一步是说搜索有字的时候那么加上 lazy=falese 就是说搜索框有字的时候不要懒加载 需要把搜索的结果默认展开 }); } queryAllTreeInfo({ id: id, uid: uid, name: name, attribute: attribute, }).then((res) => { if (res.code == 200) { this.treeList[res.data[0].num].value = res.data[0].value; this.pushID(res.data[0].value); } else { this.$message.error("条件错误，服务异常！"); } }); } }, 4.获取默认展开的数组//递归获取所有树节点下查询的ID pushID(Array) { Array.forEach((item) => { this.nIdeidlist.push(item.id); if (item.children && item.children.length > 0) { this.pushID(item.children); } }); },