由于Element文档没有详细说明Tree懒加载的使用方法,这里写了个案例,至于字段介绍,看element的文档就行。
html代码比较简单,注意必须要加上lazy,要与 load 方法结合使用。
<el-tree
:props="props"
:load="loadNode"
lazy>
</el-tree>
js代码,第一层通过leaf告知 Tree 某个节点是否为叶子节点,从而避免在叶子节点前渲染下拉按钮。
export default {
data() {
return {
props: {
label: 'name',
children: 'path',
isLeaf: 'leaf'
},
};
},
methods: {
loadNode(node, resolve) {
if(node.level===0){//最外层一级目录
//leaf如果是文件夹为false,如果为文件为true
const data=[
{name:"1",path:"地址1",leaf:true,},
{name:"2",path:"地址2",leaf:false},
{name:"3",path:"地址3",leaf:true,}
];
resolve(data)
}else{
console.log(node.data.path)
//通过path请求接口获取子数据,再resolve出接口获得数据
setTimeout(() => {
const data = [{
name: '2-1',
leaf: true,
path:'地址2-1'
}, {
name: '2-2',
leaf:false
}];
resolve(data);
}, 500);
}
}
},
};
可能你不喜欢Tree默认的三角形图标,可以用自己的css把它覆盖掉。