話不多說，先看圖再看代碼，因為我第一層是默認就會帶出來的，不能刪除和編輯，所以第一個只有添加
以下是代碼，
<template>
<div>
<el-tree
:props="props"
:load="loadNode"
lazy
ref="tree"
accordion
:default-expanded-keys="expandedKeys"
node-key="id"
style="height: 750px"
@node-click="handleNodeClick"
>
<span class="custom-tree-node" slot-scope="{ node, data }">
<span>{{ data.name }}</span>
<span>
<el-button
style="margin-left: 5px"
type="text"
size="mini"
@click="() => open(node, data, 1)"
>
添加
</el-button>
<el-button
style="margin-left: 5px"
v-if="!data.project"
type="text"
size="mini"
@click="() => open(node, data, 2)"
>
編輯
</el-button>
<el-button
v-if="!data.project"
style="margin-left: 5px"
type="text"
size="mini"
@click="() => remove(node, data)"
>
刪除
</el-button>
</span>
</span>
</el-tree>
<el-dialog :visible.sync="dialogVisible" width="30%">
<el-form ref="form" :model="temp" label-width="80px" :rules="rules">
<el-form-item label="編碼" prop="code">
<el-input v-model="temp.code"></el-input>
</el-form-item>
<el-form-item label="名稱" prop="name">
<el-input v-model="temp.name"></el-input>
</el-form-item>
</el-form>
<span slot="footer" class="dialog-footer">
<el-button size="small" @click="dialogVisible = false">取 消</el-button>
<el-button size="small" type="primary" @click="submit">確 定</el-button>
</span>
</el-dialog>
</div>
</template>
<script>
import {
add,
remove,
update,
selectListByParentId,
} from "@/api/cost/costbudgetcategory";
export default {
data() {
return {
expandedKeys: [],
rules: {
code: [{ required: true, message: "請輸入編碼", trigger: "blur" }],
name: [{ required: true, message: "請輸入名稱", trigger: "blur" }],
},
dialogVisible: false,
data: [],
defaultProps: {
children: "children",
label: "name",
},
parentId: 0,
temp: {
id: undefined,
parentId: undefined, // 父id
mainProjectId: undefined, //項目id
name: undefined, // 名稱
code: undefined, //編碼
project: undefined,
},
id: undefined,
node_had: undefined,
resolve_had: undefined,
};
},
components: {},
mounted() {},
methods: {
handleNodeClick(data) {
// this.expandedKeys = [];
// this.expandedKeys.push(data.id);
this.$emit("data", data);
},
/**
* 懶加載事件
*/
loadNode(node, resolve) {
this.node_had = node;
this.resolve_had = resolve;
if (node.level == 0) {
selectListByParentId(this.parentId).then((response) => {
return resolve(response.data.data);
});
} else if (node.level > 0) {
selectListByParentId(node.data.id).then((response) => {
return resolve(response.data.data);
});
}
},
// 添加傳當前節點，編輯傳父節點
refresh() {
let node = this.$refs.tree.getNode(this.id);
node.loaded = false;
node.expand();
},
open(node, data, type) {
// 添加
if (type == 1) {
this.restemp();
this.id = data.id;
this.temp.parentId = data.id;
this.temp.mainProjectId = data.mainProjectId;
this.temp.project = false;
} else {
// 編輯
this.temp = data;
this.id = node.parent.data.id;
}
this.dialogVisible = true;
},
// 提交數據
submit() {
this.$refs["form"].validate((valid) => {
if (valid) {
add(this.temp).then((res) => {
this.dialogVisible = false;
this.refresh();
});
} else {
console.log("error submit!!");
return false;
}
});
},
remove(node, data) {
if (node.childNodes.length > 0) {
this.$message.error("請從最后一級刪除");
return false;
} else {
const parent = node.parent;
const children = parent.childNodes;
const index = children.findIndex((d) => d.id === data.id);
children.splice(index, 1);
remove(data.id).then((res) => {});
}
},
restemp() {
this.temp = {
id: undefined,
parentId: undefined, // 父id
mainProjectId: undefined, //項目id
name: undefined, // 名稱
code: undefined, //編碼
};
},
},
};
</script>
<style lang="scss" scoped>
/deep/.custom-tree-node {
flex: 1;
display: flex;
align-items: center;
justify-content: space-between;
font-size: 14px;
padding-right: 8px;
}
/deep/.el-tree-node__content {
height: 40px !important;
}
</style>