ElementUi中el-table表格操作记录

1、ElementUi中el-table表格根据需求，父级菜单拥有新增权限而子菜单没有该权限
1、如图所示：

2、HTML代码示例：

<el-table
      :data="tableConfigInfo"
      style="width: 98%; margin-top: 20px"
      row-key="id"
      border
      :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
      stripe
    >
      <el-table-column prop="configName" label="配置项名称"> </el-table-column>
      <el-table-column prop="id" label="配置项ID"> </el-table-column>
      <el-table-column prop="configKey" label="配置项键"> </el-table-column>
      <el-table-column prop="configValue" label="配置项值"> </el-table-column>
      <el-table-column prop="remarks" label="说明"> </el-table-column>
      <el-table-column label="状态" prop="state" stripe>
        <template slot-scope="scope">
          <el-switch
            v-model="scope.row.state"
            :active-value="1"
            :inactive-value="2"
            active-color="#13ce66"
            inactive-color="#d3d3d3"
            active-text="启用"
            inactive-text="禁用"
            @change="changeConfigInfoSwitch(scope.row)"
          >
          </el-switch>
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template scope="scope">
          <el-tooltip
            class="item"
            effect="dark"
            content="添加配置项"
            placement="left"
          >
            <el-button
              v-if="scope.row.children != null"
              size="small"
              circle
              icon="el-icon-plus"
              @click="handleAddConfigInfo(scope.row.children, scope.row)"
            ></el-button>
          </el-tooltip>

          <el-tooltip
            class="item"
            effect="dark"
            content="修改配置项"
            placement="right"
          >
            <el-button
              size="small"
              circle
              icon="el-icon-edit"
              @click="handleEditConfigInfo(scope.row)"
            ></el-button>
          </el-tooltip>
        </template>
      </el-table-column>
    </el-table>

3、后端返回数据格式

{
    "code": 1000,
    "msg": "查询成功",
    "data": [
        {
            "id": 1,
            "parentId": null,
            "configName": "系统管理",
            "configKey": null,
            "configValue": null,
            "remarks": null,
            "state": 1,
            "children": [
                {
                    "id": 2,
                    "configName": "默认密码",
                    "configKey": "DEFAULT_PASSWORD",
                    "configValue": "",
                    "remarks": "添加用户账号时所设定的初始密码",
                    "state": 1
                },
                {
                    "id": 3,
                    "configName": "首页logo",
                    "configKey": "HOMEPAGE_LOG",
                    "configValue": "",
                    "remarks": "首页logo",
                    "state": 1
                },
                {
                    "id": 6,
                    "configName": "默认密码",
                    "configKey": "DEFAULT_PASSWORD",
                    "configValue": "",
                    "remarks": "添加用户账号初始密码",
                    "state": 1
                }
            ]
        },
        {
            "id": 4,
            "parentId": null,
            "configName": "图片服务",
            "configKey": null,
            "configValue": null,
            "remarks": null,
            "state": 1,
            "children": [
                {
                    "id": 5,
                    "configName": "汇图推送URL",
                    "configKey": "SEND_DATA_HUITU_URL",
                    "configValue": "",
                    "remarks": "将图片推送给汇图",
                    "state": 2
                },
                {
                    "id": 7,
                    "configName": "测试配置项",
                    "configKey": "DEFAULT_CESHI",
                    "configValue": "",
                    "remarks": "测试",
                    "state": 1
                }
            ]
        }
    ]
}

4、总结

• 首先通过后端返回的数据，我们思考可以通过什么值做判断（此处我用children做判断，有儿子的就是爸爸）
• 其次在el-button控件中，通过v-if来做判断
• 最重要的是了解slot-scope的作用：当前行数据的获取也会用到插槽,scope相当于一行的数据， scope.row相当于当前行的数据对象，所以我们在获取当前对象是用scope.row.children来做判断

即可实现该需求