<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; }); },