Element ui 树形表格 增删改查

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

概述：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>

. 表格的数据