- lazy 是否懒加载子节点,需与 load 方法结合使用 boolean 默认为false
- load 加载子树数据的方法,仅当 lazy 属性为true 时生效 function(node, resolve)
- 使用懒加载load不需要再使用data,利用resolve返回值即可
- 注意:第一层的数据要写在node.level == 0
HTML部分
<el-treeshow-checkboxnode-key="id"lazy //必须:load="loadNode" //必须:default-expand-all ="false":expand-on-click-node="false":render-content="renderContent"></el-tree>
js部分
data(){return{props: {label: "name", //显示在页面上的值的属性名children: "zones", //表示该组件的子节点数据存储在"zones"属性中isLeaf: "leaf",//表示该组件的叶子节点数据存储在"leaf"属性中}
}
},
computed:{advertList(){return this.$store.state.advert.advertList}methods:{ // 此处只举例了两层loadNode(node, resolve) {//第一层if (node.level === 0) {this.getAdveData(resolve);}//第二层if (node.level == 1) {this.getchildData(node,resolve);}//其余返回空 ,一定要加这个判断,否则会一直执行懒加载函数else{return resolve([])}
},
//第一层的逻辑async getAdveData(resolve){try {await this.$store.dispatch('advert/getAdvert')return resolve( this.advertList);} catch (error) {console.warn(error);}},//第二层的逻辑async getchildData(node,resolve){try {let params = {id:node.data.pid}await this.$store.dispatch('advert/getAdvert',params)return resolve( this.advertList);} catch (error) {console.warn(error);}}}