element ui tree树形控件 编辑，新增及删除

element ui tree树形控件 编辑，新增及删除。效果图如下：

可实现对一、二、三级目录的增删改，以及页面样式实现。

<template>代码

         JS代码

<script>
let id = 1000;
export default {
  data() {
    const data = [
      {
        id: 1,
        label: "用例管理",
        children: [
          {
            id: 4,
            label: "用例first",
            children: [
              {
                id: 5,
                label: "用例second",
              },
              {
                id: 6,
                label: "用例three",
              },
            ],
          },
        ],
      },
      {
        id: 2,
        label: "用例管理",
        children: [
          {
            id: 7,
            label: "用例first",
          },
          {
            id: 8,
            label: "用例second",
          },
        ],
      },
      {
        id: 3,
        label: "用例管理",
        children: [
          {
            id: 9,
            label: "用例first",
          },
          {
            id: 10,
            label: "用例second",
          },
        ],
      },
    ];
    return {
      data: JSON.parse(JSON.stringify(data)),
      currentEle: null, //操作下拉列表 当前图表元素 省略号
      dropdownShow: false, //下拉列表当前显示状态
      setTree: [], // tree数据
      id: "id", // id对应字段
      MAX_LEVEL: 3, // 设定最大层级
      NODE_ID_START: 0, // 新增节点id，逐次递减
      startId: null,
      //页面可拖拽
      defaultProps: {
        children: "children",
        label: "label",
      },
    };
  },
  props: {
    bool: {
      type: Boolean,
      default: false,
    },
  },
  created() {
    // 初始值
    this.startId = this.NODE_ID_START;
  },

  methods: {
    //所有用例列表接口
    handleAllCase() {},
    //el-tree点击事件
    myEvent(d1, d2, d3) {
      this.$emit("myEvent", d1.id);
    }, //d1.label
    //下拉列表
    handleDropdown(v) {
      this.dropdownShow = v;
      if (v) return;
      this.currentEle.style.cssText += "display:none";
    },
    //增删改鼠标移入移出隐藏显示
    //鼠标移入
    onMouseOver: function (event) {
      event.target.parentElement.querySelector(
        ".comp-tr-node--btns"
      ).style.cssText += "display:block";
      this.currentEle = event.target.parentElement.querySelector(
        ".comp-tr-node--btns"
      );
    },
    //鼠标移出
    onMouseOut: function (event) {
      if (this.dropdownShow) return;
      event.target.parentElement.querySelector(
        ".comp-tr-node--btns"
      ).style.cssText += "display:none";
    },
    //新增一级目录模块点击事件
    handleNewMoudle() {
      this.data.push({
        id: id++,
        label: "未命名模块",
        children: [],
        isEdit: true,
      });
    },
    //新增按钮
    append(node, data) {
      if (node.level >= this.MAX_LEVEL) {
        this.$message.warning(
          "当前目录已达到" + this.MAX_LEVEL + "级，无法新增！"
        );
        return false;
      }
      //新定义一个对象
      const newChild = {
        id: id++,
        label: "未命名模块",
        children: [],
        isEdit: true,
      };
      if (!data.children) {
        this.$set(data, "children", []);
      }
      data.children.push(newChild);
      //新增子节点到3级
      console.log(node, data);

      this.$nextTick(() => {
        if (this.$refs["slotTreeInput" + data[this.id]]) {
          this.$refs["slotTreeInput" + data[this.id]].$refs.input.focus();
        }
      });
    },
    //删除按钮
    remove(node, data) {
      const parent = node.parent;
      const children = parent.data.children || parent.data;
      const index = children.findIndex((d) => d.id === data.id);
      children.splice(index, 1);
    },
       
    //编辑按钮
    handleInput(node, data) {
      // 修改节点
      console.log(node, data);
      // 退出编辑状态
      if (data.isEdit) {
        this.$set(data, "isEdit", false);
      }
    },
    handleEdit(node, data) {
      // 编辑节点
      console.log(node, data);
      // 设置编辑状态
      if (!data.isEdit) {
        this.$set(data, "isEdit", true);
      }

      // 输入框聚焦
      this.$nextTick(() => {
        if (this.$refs["slotTreeInput" + data[this.id]]) {
          this.$refs["slotTreeInput" + data[this.id]].$refs.input.focus();
        }
      });
    },

    //拖拽点击事件
    handleDragStart(node, ev) {
      // console.log("drag start", node);
    },
    handleDragEnter(draggingNode, dropNode, ev) {
      //console.log("tree drag enter: ", dropNode.label);
    },
    handleDragLeave(draggingNode, dropNode, ev) {
      // console.log("tree drag leave: ", dropNode.label);
    },
    handleDragOver(draggingNode, dropNode, ev) {
      // console.log("tree drag over: ", dropNode.label);
    },
    handleDragEnd(draggingNode, dropNode, dropType, ev) {
      // console.log("tree drag end: ", dropNode && dropNode.label, dropType);
    },
    handleDrop(draggingNode, dropNode, dropType, ev) {
      // console.log("tree drop: ", dropNode.label, dropType);
    },
    //拖拽点击事件
    allowDrop(draggingNode, dropNode, type) {
      if (dropNode.data.label === "二级 3-1") {
        return type !== "inner";
      } else {
        return true;
      }
    },
    allowDrag(draggingNode) {
      return draggingNode.data.label.indexOf("三级 3-2-2") === -1;
    },
  },
};
</script>

    CSS代码

<style lang="less" scoped>
.allC {
  margin-left: 21px;
  margin-bottom: 5px;
  i {
    color: #c0c4cc;
  }
  .allCase {
    margin-left: 8px;
    color: #606266;
    font-size: 14px;
  }
}

.custom-tree-node {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
  padding-right: 8px;
}
.el-tree {
  height: 100%;
  .isEdit {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    .el-input {
      width: 100px;
      height: 5px;
    }
  }
}
.el-icon-plus {
  margin: 10px 0 0 22px;
  color: #606266;
  font-size: 14px;
  span {
    margin-left: 10px;
    font-size: 14px;
  }
}
</style>