话不多说，先看图再看代码，因为我第一层是默认就会带出来的，不能删除和编辑，所以第一个只有添加

 

 以下是代码，

<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>