<el-tree
:props="props"
:load="loadNode"
lazy
node-key="areaId"
:expand-on-click-node="false"
ref="asyncTree"
@check-change="handleCheckChange"
@node-click="hadleNodeClick">
<span class="custom-tree-node" slot-scope="{ node, data }">
<span style="display: inline-block;margin-right: 10px">{{ node.label }}</span>
<span v-if="data.areaId !='root'">
<el-button
type="text"
size="medium"
@click="() => append(data)">
新增下级
</el-button>
<el-button
type="text"
size="medium"
@click="() => edit(node,data)">
修改
</el-button>
<el-button
type="text"
size="mini"
@click="() => remove(node, data)">
删除
</el-button>
</span>
</span>
</el-tree>
其中 node-key 绑定值为唯一的id，点击时获取到的也是这个值。
props: {
label: 'areaName',
children: 'zones',
isLeaf: 'ext1',
},
props 绑定的值中，label对应的是显示的文字，isleaf对应为是否有子节点（true/fasle）
loadNode(node, resolve) {
if (node.level === 0) {
let obj = {
}
this.findAreaByParentId(obj,resolve)
}
if (node.level > 0) {
let obj = {
"parentId": node.data.areaId,
"areaName":node.data.areaName,
"subCode":node.data.subCode,
"areaNumber":node.data.areaNumber
}
this.findAreaByParentId(obj,resolve)
}
},
loadNode 方法当level的值为0时是第一次默认请求，大于0时是点击时的请求，我这里将resolve作为参数，传递给了请求，然后将请求后得到的数据resolve出去
findAreaByParentId(obj,resolve){
findAreaByParentId(obj).then(data => {
if(data.responseCode =='1000'){
data.content.forEach(item=>{
item.ext1 = item.ext1 == 0 ? false: true
})
resolve(data.content);
}
}).catch(error => {
});
},
