采取el-tree达成懒加载、请求对象的检索依次进行
原创首要条件: 要求后端返回检索后的文件夹id集合
主要通过这个属性去实现defaultExpandedKeys
开始检索
我们这里举例检索返回的数据为:[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
开始检索
版权声明
所有资源都来源于爬虫采集,如有侵权请联系我们,我们将立即删除