- 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);}}}