vue elementUi tree 懒加载使用详情
背景：
vue下使用elementUI
文档：
http://element-cn.eleme.io/#/zh-CN/component/tree#tree-shu-xing-kong-jian
需求：
只保存二级节点中选中的数据；不保存一级节点选中的数据。
效果：
数据来源：
后台提供两个接口分别用于取第一级节点和第二级节点的数据；
思路：
点击标签列表时，触发selectLabelList获取第一级节点的数据触发lodeNode进行填充,展开一级节点；点击任一一级节点的下拉箭头通过loadNode的node.level==1获取二级节点进行填充。每次选择都会触发handleCheckChange获取选中或删除弃选的内容;最终将用户选中的所有二级数据保存到labelCheckedList这个数组中。
注意点：
node-key、ref、lazy这3个属性一定要有
一级节点传递给二级节点的值是用node.data里面的id即node.data.id而不是用官网案例上的node.id(被坑过)
- 1
- 2
实战：
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>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
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;
})
},