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,