需求：el-tree懒加载数据，并且支持全局搜索，叶子节点复选框勾选状态不丢失。
-
问题1：懒加载的数据，不展开一次节点，搜索时无法搜索到。
-
解决：控制懒加载状态，搜索时关闭懒加载，使用
:data=data去默认显示数据。没有搜索时，data清空，开启懒加载并重新执行获取父节点数据方法。 -
问题2：动态控制懒加载状态，叶子节点的复选框会丢失
-
解决：使用
this.$refs.tree.getCheckedNodes()和this.$refs.tree.setCheckedKeys(idList)控制节点的选中状态。
- 组件
:data="data"取消懒加载时的数据存放
check-strictly父级点与叶子节点互不关联
check-change复选框改变状态时的事件
node-click节点点击时的事件
:filter-node-method
// 布局
<van-search placeholder="输入关键字进行过滤" v-model="filterText" />
<el-tree
class="filter-tree"
:data="data"
:props="defaultProps"
:load="loadNode"
lazy
check-strictly
show-checkbox
@check-change="handleCheckChange"
@node-click="nodeClick"
:filter-node-method="filterNode"
node-key="id"
ref="tree"/>
- 监听输入值
this.$refs.tree.$data.store.lazy = false;
watch: {
filterText(val) {
this.lazyArr = [...this.$refs.tree.getCheckedNodes()];
let idList = [];
this.$refs.tree.filter(val);
// -----------------------1.输入状态时，取消懒加载，重新发起请求获取数据并赋值给data
if (val.trim() !== "") {
this.$refs.tree.$data.store.lazy = false;
this.data = [];
getLikeMember({ name: val }).then((res) => {数据处理}
this.$nextTick(() => {
// 1. 展开所有节点
const nodes = this.$refs.tree.store._getAllNodes();
for (let i in nodes) {
nodes[i].expanded = true;
}
// 2. 选中前页已选中的状态
this.lazyArr.map((item) => {
idList.push(item.id);
});
//
this.$refs.tree.setCheckedKeys(idList);
this.checkedArr = [...this.$refs.tree.getCheckedNodes()];
});
});
} else {
// -----------------------2.清空输入值状态，实行懒加载，重新获取一级组织架构
console.log(this.$refs.tree.getCheckedNodes());
this.searchArr = this.$refs.tree.getCheckedNodes();
this.$refs.tree.$data.store.lazy = true;
this.getMember();
}
}
},
- 懒加载
loadNode(node, resolve) {
// ---------------- 1. 未展开时的父节点数据
if (node.level === 0) {
return resolve(this.data);
}
// ---------------- 2. 展开的叶子节点数据
if (node.level >= 1) {
getTreeList({
page: 1,
count: 10000,
name: "",
deptId: node.data.id
}).then((res) => {
let data = [];
res.data.data.records.map((item) => {
if (item.id != this.userId) {
data.push({
id: item.id,
label: item.name,
leaf: true
});
}
});
resolve(data);
let idList = [];
// 设置已有叶子节点勾选状态-------
this.$refs.tree.getCheckedNodes().map((item) => {
idList.push(item.id);
});
this.$refs.tree.setCheckedKeys(idList)
});
}
},
