<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對應為是否有子節(jié)點（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作為參數(shù)，傳遞給了請求，然后將請求后得到的數(shù)據(jù)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 => {
});
},
