vue elementUi tree 懶載入使用詳情
阿新 • • 發佈:2018-12-23
背景:
vue下使用elementUI
文件:
需求:
只儲存二級節點中選中的資料;不儲存一級節點選中的資料。
效果:
資料來源:
後臺提供兩個介面分別用於取第一級節點和第二級節點的資料;
思路:
點選標籤列表時,觸發selectLabelList獲取第一級節點的資料觸發lodeNode進行填充,展開一級節點;點選任一一級節點的下拉箭頭通過loadNode的node.level==1獲取二級節點進行填充。每次選擇都會觸發handleCheckChange獲取選中或刪除棄選的內容;最終將使用者選中的所有二級資料儲存到labelCheckedList這個陣列中。
注意點:
node-key、ref、lazy這3個屬性一定要有 一級節點傳遞給二級節點的值是用node.data裡面的id即node.data.id而不是用官網案例上的node.id(被坑過)
實戰:
html:
<el-button @click="selectLabelList">標籤列表</el-button>
<el-tree
node-key="id"
ref="tree"
highlight-current
:props="props"
:load="loadNode"
lazy=""
show-checkbox
@check-change="handleCheckChange">
</el-tree>
js:這是核心的部分程式碼,並不是所有,有的欄位還沒有定義。
data() { return { labelCheckedList:[], props: { label: 'name', children: 'zones', }} // labelCheckedList接收被勾選的資料 handleCheckChange(data){ this.currTreeId=data.id setTimeout(() => { let currtData = this.$refs.tree.getCheckedNodes(true) this.labelCheckedList = currtData; }, 100); }, //懶載入時觸發 loadNode(node, resolve) { if (node.level === 0) { return resolve(this.categorylist); } if (node.level > 1) return resolve([]); if(node.level === 1) { // 二級節點 this.getChildrenNode(node,resolve) } }, // 二級節點 getChildrenNode(node,resolve) { let categoryId = node.data.id; this.$http.post('/api/getLabelListByCategoryId', { categoryId:categoryId }, { emulateJSON: true, emulateHTTP: true }).then(res => { this.childrenList = res.body; if(this.childrenList.length==0){ this.$message.error('資料拉取失敗,請重新整理再試!'); return; } resolve(this.childrenList); }); }, // 收起、展示tree selectLabelList() { if(!this.isShowTree){ this.getCategorylist(); }else{ this.$refs.tree.$data.store.lazy = false this.isShowTree=false; } }, //獲取一級節點 getCategorylist(){ this.$http.post('/api/categorylist', { searchInfo: this.searchLabelInfo, }).then(res => { let data = res.body.data.list; if(data.length > 0){ data.forEach(item => { item.disabled= true; }) } this.categorylist = data; this.isShowTree=true; }) },