2023.12.22今天我学习了el-tree如何实现懒加载,效果如:
代码如下:
懒加载的使用不需要用:data
<template><div><el-tree:props="props":load="loadNode"lazynode-key="id"show-checkbox/></div>
</template>
<script>
export default{data(){return{ props:{label:'label',//节点字段children:'children',//存放子节点数据字段isLeaf:'leaf',//判断节点是否还能展开true表示没有子节点,false表示还存在子节点}}},methods:{loadNode(node,resolve){//根据你el-tree有几层进行扩展//node表示选中节点数据,resovle表示总数据switch(node.level){case 0://初始默认节点return resolve(this.getZeroData(node));//对初始默认节点做处理case 1://一级节点return resolve(this.getFirstData(node));//对一级节点做处理case 2://二级节点return resolve(this.getSecondData(node));//对二级节点做处理default:return resolve([]);//返回空数组,注意:这个是必须要写的}},getZeroData(node){return [{id:1,label:'我是爷爷节点',leaf:fasle}]//node.data存放当前节点的数据},getFirstData(node){if(node.data.label=='我是爷爷节点'){return [{id:2,label:'我是爸爸节点',leaf:fasle}]//node.data存放当前节点的数据}else if(node.data.label=='我是外公节点'){return [{id:3,label:'我是妈妈节点',leaf:fasle}]//node.data存放当前节点的数据}},getSecondData(node){return [{id:4,label:'我是孩子节点',leaf:true}]//node.data存放当前节点的数据},}
}
</script>