element-el-tree的懒加载+搜索定位+动态树结构，效果如下，每个树都有自己独立的搜索独立的数据
1.需求是懒加载+搜索定位+动态树结构，效果如下，每个树都有自己独立的搜索独立的数据
: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
>
{{ node.label }}
type="text"
size="mini"
@click="() => addNode(node, data)"
>添加
>
type="text"
size="mini"
@click="() => importNode(node, data)"
>导入
>
type="text"
size="mini"
@click="() => handleDelete(node, data)"
>删除
>
2.需求清除了下面开始上传代码 树结构是遍历出来的
treeList v-for(item,index) in treeList :key="index"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); } }); },