<el-tree
:data="data"
show-checkbox
node-key="id"
default-expand-all
:expand-on-click-node="false"
>
<span class="custom-tree-node" slot-scope="{ node, data }">
<span>{{ node.label }}</span>
<span>
<el-button type="text" size="mini" @click="() => append(data)">
添加
</el-button>
<el-button
type="text"
size="mini"
@click="() => edit(node, data)"
>
编辑
</el-button>
<el-button
type="text"
size="mini"
@click="() => remove(node, data)"
>
删除
</el-button>
</span>
</span>
</el-tree>
edit(node, data) {
const parent = node.parent;
const children = parent.data.children || parent.data;
const index = children.findIndex((d) => d.id === data.id);
this.$prompt("请编辑节点名称", "提示", {
confirmButtonText: "确定",
cancelButtonText: "取消",
inputValidator:function(val){
console.log(val);
if(val){
return true;
}else{
return '输入内容不能为空';
}
}
})
.then(({ value }) => {
children[index].label = value;
})
.catch(() => {
return;
});
},