Element 表格的树形数据 带编辑删除操作

话不多说 直接上代码

样式

template 部分

<el-table :data="tableData" highlight-current-row v-loading="listLoading" 
       @selection-change="selsChange" style="width: 100%;" 
       row-key="id" default-expand-all  
       :tree-props="{children: 'child', hasChildren: 'hasChildren'}">
      <el-table-column type="selection" width="55">
      </el-table-column>
      <el-table-column prop="name" label="菜单名称">
      </el-table-column>
      <el-table-column prop="id" label="id" v-if="idshow">
      </el-table-column> 
      <el-table-column prop="sort" label="排序">
      </el-table-column> 
      <el-table-column prop="menu_route" label="菜单路由">
      </el-table-column>
      <el-table-column label="操作">
        <template scope="scope">          
          <el-button size="small" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
          <el-button type="danger" size="small" @click="handleDel(scope.$index, scope.row)">删除</el-button>
          <!-- <el-button type="primary" size="small" @click="handleAdd">细化权限</el-button> -->
        </template>
      </el-table-column>
    </el-table> 

属性结构主要 tree-props 配置此属性 数组格式

table Data 部分

data() {
      return {
        // id显示隐藏
        idshow: false,
        listLoading: false,
        // 表格数据
        tableData: [{
          "id": 29,
          "fid": 0,
          "name": "权限管理",
          "menu_route": "/jurisdiction",
          "auth_value": null,
          "sort": 0
        }, {
          "id": 39,
          "fid": 0,
          "name": "平台道具管理",
          "menu_route": "/props",
          "auth_value": null,
          "sort": 0
        }, {
          "id": 40,
          "fid": 0,
          "name": "平台充值管理",
          "menu_route": "/11",
          "auth_value": null,
          "sort": 0,
          "child": [{
            "id": 41,
            "fid": 40,
            "name": "海外SDK",
            "menu_route": "/overseassdk",
            "auth_value": null,
            "sort": 0,
            "level": 2
          }, {
            "id": 42,
            "fid": 40,
            "name": "国内SDK",
            "menu_route": "/inlandsdk",
            "auth_value": null,
            "sort": 0,
            "level": 2
          }]
        }],
    },

编辑

editSubmit: function () {
        this.$refs.editForm.validate((valid) => {
          if (valid) {
            this.$confirm('确认提交吗？', '提示', {}).then(() => {
              this.editLoading = true;
              this.$post('/menu/save', {
                menu_id: this.editForm.id,
                menu_name: this.editForm.editname,
                menu_route: this.editForm.route,
                sort: this.editForm.sort
              }).then((result) => {
                if (result.code == 200) {
                  this.editLoading = false;
                  this.editFormVisible = false;
                  this.$message({
                    message: '提交成功',
                    type: 'success'
                  });      
                  this.getMenulist();
                } else {
                  this.editLoading = false;
                  this.$message('提交失败')
                }
              }).catch(() => {
                 this.$message('网络连接错误')
              });
            });
          }
        });
      }

#####删除部分

handleDel: function (index, row) {
        this.$confirm('确认删除该行吗?', '提示', {
          type: 'warning'
        }).then(() => {
          var idid = row.id.toString()
          this.$post('/menu/delete', {
            menu_id: idid,
            status: '0'
          }).then((result) => {
            if (result.code == 200) {
              this.$message({
                message: '删除成功',
                type: 'success'
              });      
              this.getMenulist()
              this.getparentmenu()
            } else {
              this.$message('删除失败')
            }
          }).catch(() => {
             this.$message('网络连接错误')
          });
        }).catch(() => {

        });
      }

有问题欢迎留言，或加qq：1246862769，一起成长！