vue-element树形控件增删改

<el-button
          type="primary"
          icon="el-icon-plus"
          style="margin: 10px"
          v-show="treeData.length == 0"
          @click.enter="addParentLevelNode"
          >新增</el-button >
        <el-tree
          :data="treeData"
          node-key="id"
          show-checkbox
          default-expand-all
          @node-click="handleLeftclick"
          :expand-on-click-node="false"
          :filter-node-method="filterNode"
          ref="tree">
          <template #default="{ node }">
            <span class="custom-tree-node">
              <span>{{ node.label }}</span>
              <span>
                <el-dropdown trigger="click">
                  <span class="el-dropdown-link">
                    <i class="el-icon-more"></i>
                  </span>
                  <template #dropdown>
                    <el-dropdown-menu>
                      <el-dropdown-item
                        v-show="firstLevel"
                        @click.enter="addSameLevelNode"
                        >新增同级</el-dropdown-item>
                      <el-dropdown-item
                        v-show="lastLevel"
                        @click.enter="addChildNode"
                        >新增下级</el-dropdown-item>
                      <el-dropdown-item @click.enter="editNode"
                        >编辑</el-dropdown-item>
                      <el-dropdown-item @click.enter="deleteNode"
                        >删除</el-dropdown-item >
                    </el-dropdown-menu>
                  </template>
                </el-dropdown>
              </span>
            </span>
          </template>
        </el-tree>

treeData: [
        {
          id: 1,
          label: "1111",
          isEdit: true,
        },
      ],
      isShow: false,
      currentData: "",
      currentNode: "",
      menuVisible: false,
      firstLevel: false,
      lastLevel: false,
      filterText: "",
      maxexpandId: 4,

handleLeftclick(data, node) {
      this.currentData = data;
      this.currentNode = node;
      if (node.level != 1) {
        //如果是根节点则不显示新增同级
        this.firstLevel = true;
      } else {
        this.firstLevel = false;
      }
      if (node.level != 3) {
        //如果是最后一级则不显示新增下级
        this.lastLevel = true;
      } else {
        this.lastLevel = false;
      }
    },
    // 增加父节点事件
    addParentLevelNode() {
      let id = Math.ceil(Math.random() * 100);
      this.$prompt("请输入父节点名称", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
      })
        .then(({ value }) => {
          let treeD = { id: id, label: value };
          this.$refs.tree.append(treeD, this.currentNode.parent);
        })
        .catch(() => {});
    },
    // 增加同级节点事件
    addSameLevelNode() {
      let id = Math.ceil(Math.random() * 100);
      this.$prompt("请输入子节点名称", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
      })
        .then(({ value }) => {
          let treeD = { id: id, label: value };
          this.$refs.tree.append(treeD, this.currentNode.parent);
        })
        .catch(() => {});
    },

    // 增加子级节点事件

    addChildNode() {
      if (this.currentNode.level >= 3) {
        this.$message.error("最多只支持三级！");
        return false;
      }
      let id = Math.ceil(Math.random() * 100);
      this.$prompt("请输入子节点名称", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
      })
        .then(({ value }) => {
          let treeD = { id: id, label: value };
          this.$refs.tree.append(treeD, this.currentNode);
        })
        .catch(() => {});
    },
    // 删除节点

    deleteNode() {
      this.$confirm(
        "确定删除'${this.currentNode.label}'节点, 是否继续?",
        "提示",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }
      )
        .then(() => {
          this.$refs.tree.remove(this.currentNode);
        })
        .catch(() => {});
    },
    //编辑节点
    editNode() {
      if (this.currentData.isEdit) {
        this.$prompt("请输入节点名称", "提示", {
          confirmButtonText: "确定",
          inputValue: this.currentNode.data.label,
          cancelButtonText: "取消",
        }).then(({ value }) => {
          this.$set(this.currentData, "label", value);
        });
      }
    },