如何使用Element ui 树形表格 增删改查

大概样子就是这样，有四个操作功能按钮，增加子集，增加同级，删除，清空，思路参考了element ui 树的增删改查

直接看代码
. 首先是表格，多余的表格行我删除了 自行添加

<el-table
	 :data="tableData"
	 style="width: 100%;font-size:18px"
	 row-key="id"
	 border
	 default-expand-all
	 ref="tableData"
	 :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
     :header-cell-style="{background:'#d6e5fb',padding:'8px 0px'}"
        :cell-style="{padding:'4px 0px'}"
      >
       <el-table-column label="操作" min-width="45%" align="center" header-align="center">
          <template slot-scope="scope">
            <el-button
              @click="addtablezhuanfa(scope)"
              type="primary"
              size="small"
              :disabled="scope.row.moren!=''||scope.row.value!=''"
              plain
            >增加子级</el-button>
            <el-button
              @click="addtablezhuanfafy(scope)"
              type="primary"
              size="small"
              plain
            >增加同级</el-button>
            <el-button
              @click="removetablezhuanfa(scope)"
              type="primary"
              size="small"
              plain
              :disabled="tableData.length==1&&scope.row.parentid==0"
            >删除</el-button>
         </el-table-column>

. 表格的数据

   tableData: [
        {
          id: 1,
          children: [],
          moren: "",
          parentid: 0,
        },
      ],
      tableDataobj：{}，//对tableData数据处理

methods 方法

//增加子级
 addtablezhuanfa(scope) {
      var arr = [];
      var obj = {
        id: this.indexid++,
         parentid: scope.row.id,
         children: [],
      };
      if (scope.row.children.length != 0) {
        arr = scope.row.children;
        arr.push(obj);
        this.$set(scope.row, "children", arr);
      } else {
        this.$set(scope.row, "children", [obj]);
      }
    },

//增加同级-- 这里要注意是否为第一级，在之前先对整个数组进行处理
addtablezhuanfafy(scope) {
      if (scope.row.parentid != 0) {
        this.tableDataobj = {};
        this.jsonarr(this.tableData, "");
        var obj = this.tableDataobj[scope.row.parentid];
        delete obj.lujin;
        var arr = obj.children;
        var objj = {
          id: this.indexid++,
          parentid: obj.id,
          children: [],
        };
        arr.push(objj);
        this.$set(obj, "children", arr);
      } else {
        this.tableData.push({
          id: this.indexid++,
          children: [],
          parentid: 0,
        });
      }
    },
    //数据进行的处理
     jsonarr(arr, url) {
      for (var i = 0; i < arr.length; i++) {
        this.tableDataobj[arr[i].id] = arr[i];
        this.tableDataobj[arr[i].id].lujin = url + "/" + i;
        if (arr[i].children) {
          this.jsonarr(arr[i].children, url + "/" + i + "/" + "children");
        }
      }
    },
      //  删除
    removetablezhuanfa(scope) {
      this.$confirm("是否删除", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
        dangerouslyUseHTMLString: true,
      })
        .then(() => {
          if (scope.row.parentid != 0) {
            this.tableDataobj = {};
            this.jsonarr(this.tableData, "");
            // 自己的Index  父级的路径
            var arr1 = this.tableDataobj[scope.row.parentid].lujin
              .split("/")
              .slice(1);
            var arr2 = this.tableDataobj[scope.row.id].lujin
              .split("/")
              .slice(1);
            var obj = {};
            for (var i = 0; i < arr1.length; i++) {
              if (JSON.stringify(obj) == "{}") {
                obj = this.tableData[arr1[i]];
              } else {
                obj = obj[arr1[i]];
              }
            }
            var arr = obj.children;
            arr = arr
              .slice(0, arr2[arr2.length - 1])
              .concat(arr.slice(arr2[arr2.length - 1] + 1));

            this.$set(obj, "children", arr);
          } else {
            this.tableDataobj = {};
            this.jsonarr(this.tableData, "");
            var arr2 = this.tableDataobj[scope.row.id].lujin
              .split("/")
              .slice(1);
            this.tableData = this.tableData
              .slice(0, arr2[arr2.length - 1])
              .concat(this.tableData.slice(arr2[arr2.length - 1] + 1));
          }
        })
        .catch(() => {
        });
    },