vue树组件增删改

咳咳，最近项目遇到一个空间管理层级的需求，需要通过树组件来实现。树组件需要有新增同级，下级，新增上级，对节点进行修改，删除。
跟度娘纠缠了N久之后发现总感觉不得劲。没办法 ，老大催的紧，只能自己撸起袖子干，好了废话不多说了直接上代码

这是html代码

<template>
  <div class="myTrees">
    <el-tree
      :data="treeData"
      node-key="id"
      default-expand-all
      @node-click="handleLeftclick"
      :expand-on-click-node="false"
      :filter-node-method="filterNode"
      ref="tree"
    >
      <span class="custom-tree-node" slot-scope="{node,data}">
          <span>{{ node.label }}</span>
        <span>
          <el-dropdown trigger="click">
               <span class="el-dropdown-link">
                 <i class="el-icon-more"></i>
               </span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item v-show="firstLevel" @click.native="addSameLevelNode">新增同级</el-dropdown-item>
              <el-dropdown-item v-show="lastLevel" @click.native="addChildNode">新增下级</el-dropdown-item>
              <el-dropdown-item @click.native="editNode">编辑</el-dropdown-item>
              <el-dropdown-item @click.native="deleteNode">删除</el-dropdown-item>
          </el-dropdown-menu>
          </el-dropdown>
        </span>
      </span>
    </el-tree>
  </div>
</template>

<script>
  let id = 1000;
  export default {
    name: "list",
    data() {
      return {
        treeData: [
          {
            id: 1,
            label: '一级 2',
            isEdit: true,
            children: [{
              id: 3,
              label: '二级 2-1',
              isEdit: true,
              children: [{
                id: 4,
                isEdit: true,
                label: '三级 3-1-1'
              }, {
                id: 5,
                isEdit: true,
                label: '三级 3-1-2',
                disabled: true
              }]
            }, {
              id: 2,
              isEdit: true,
              label: '二级 2-2',
              disabled: true,
              children: [{
                id: 6,
                isEdit: true,
                label: '三级 3-2-1'
              }, {
                id: 7,
                isEdit: true,
                label: '三级 3-2-2',
                disabled: true
              }]
            }]
          }
        ],
        isShow: false,
        currentData: "",
        currentNode: "",
        menuVisible: false,
        firstLevel: false,
        lastLevel:false,
        filterText: "",
        maxexpandId: 4,
      }
    },
    methods: {
      append(data) {
        const newChild = {id: id++, label: 'testtest', children: []};
        if (!data.children) {
          this.$set(data, 'children', [])
        }
        data.children.push(newChild);
      },


      // 鼠标左击事件

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

      },
      // 增加同级节点事件
      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() {
        console.log(this.currentData);
        console.log(this.currentNode);
        if (this.currentNode.level >= 3) {
          this.$message.error("最多只支持三级！");

          return false;
        }
        let id = Math.ceil(Math.random() * 100);
        this.$prompt('请输入节点名称', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
        }).then(({value}) => {
          console.log('>>>>>>>', 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(() => {
          console.log('>>>>删除', this.currentNode.data.code);
          this.$refs.tree.remove(this.currentNode);
        }).catch(() => {

        });


      },
      //编辑节点
      editNode() {
        console.log('>>>>>xiugi', this.currentData.code);
        if (this.currentData.isEdit) {
          this.$prompt('请输入节点名称', '提示', {
            confirmButtonText: '确定',
            inputValue: this.currentNode.data.label,
            cancelButtonText: '取消',
          }).then(({value}) => {
            console.log('bianji',this.$refs.tree);
            this.$set(this.currentData,'label',value);
          })
        }

      },
   

    }
  }
</script>

<style scoped>
  .myTrees {
    width: 288px;
    background: rebeccapurple;
  }

  .el-tree {
    background: aquamarine;
  }

  .custom-tree-node {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 14px;
    padding-right: 8px;
  }
</style>

到这里基本上就已经完美的搞定了。这个地方因为我们需求是只写三级，所以我控制了只有三级，你们可以根据自己需求来写N级。还有一个地方就是，新增同级和新增下级这个地方，同级是 this.$refs.tree.append(treeD,this.currentNode.parent);<这里美元符号显示不了>下级是this.$refs.tree.append(treeD, this.currentNode);不能写错了哦。还有那个点击弹出增删改方法的时候，我用的是el-dropdown这个地方最好是用点击的，因为需要先点击才能触发handleLeftclick()这个方法，不然是获取不到节点信息的。最后用到项目中的时候，要跟后端小哥哥商量好，最好是跟他说你要什么样的数据结构，不然真的很蛋疼。<我要这样这样的数据结构，不给？ 信不信我抽你 哈哈哈> 最后祝大家撸代码愉快