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);
}
});
},
