首要条件: 要求后端返回检索后的文件夹id集合
主要通过这个属性去实现defaultExpandedKeys
<el-button @click="search"> 开始检索 </el-button>
<el-tree :props="defaultProps" :data="treeData" lazy :load="loadNode" ref="tree"
:defaultExpandedKeys="defaultExpandedKeys" node-key="id">
</el-tree>
我们这里举例检索返回的数据为:[8, 9, 1, 4, 3, 6, 5]
并且造假数据,只要展开节点就会加载递增id的树节点,也就是1 -> 2, 3, 2 -> 4, 5 依次类推
所以未检索前的树状态如下:
点击检索之后
逻辑代码以及假数据代码:
search() {
this.defaultExpandedKeys = [8, 9, 1, 4, 3, 6, 5];
},
getTree() {
return this.$refs.tree;
},
loadNode(node, resolve) {
setTimeout(() => {
if (node.level === 0) {
resolve([{
id: 1,
label: '1',
children: []
}, {
id: 2,
label: '2',
children: []
}])
}
const data = [];
this.fakeId++;
data.push({
id: this.fakeId,
label: this.fakeId,
children: [],
})
this.fakeId++;
data.push({
id: this.fakeId,
label: this.fakeId,
children: [],
})
resolve(data)
}, 500);
},
所有代码:
APP.VUE
<template>
<div id="app">
<el-button @click="search"> 开始检索 </el-button>
<el-tree :props="defaultProps" :data="treeData" lazy :load="loadNode" ref="tree"
:defaultExpandedKeys="defaultExpandedKeys" node-key="id">
</el-tree>
<!-- <router-view /> -->
</div>
</template>
<script>
export default {
name: "app",
data() {
return {
defaultProps: {
children: 'children',
label: 'label',
isLeaf: false,
},
defaultExpandedKeys: [1],
fakeId: 2,
treeData: [],
};
},
methods: {
search() {
this.defaultExpandedKeys = [8, 9, 1, 4, 3, 6, 5];
},
getTree() {
return this.$refs.tree;
},
loadNode(node, resolve) {
setTimeout(() => {
if (node.level === 0) {
resolve([{
id: 1,
label: '1',
children: []
}, {
id: 2,
label: '2',
children: []
}])
}
const data = [];
this.fakeId++;
data.push({
id: this.fakeId,
label: this.fakeId,
children: [],
})
this.fakeId++;
data.push({
id: this.fakeId,
label: this.fakeId,
children: [],
})
resolve(data)
}, 500);
},
},
}
</script>
<style lang="scss"scoped>
</style>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html,
body {
height: 100%;
}
</style>