vue+element 表格嵌套子表格的实现

vue+element 表格嵌套子表格的实现

主要是根据element提供的type="expand"属性来实现，下面是个人写的demo可用来参考

在获取第一级表格数据的时候先为子表格构建一下所需的数据结构

const tabelArr = JSON.parse(JSON.stringify(response.data.resultObj)) // 后端返回的表格数据
tabelArr.forEach(element => {
  Vue.set(element, 'children', [])
})
this.tableData = tabelArr

页面的代码如下

<!-- demo -->
<div class="content-right-table">
  <el-table
    ref="tableData"
    :data="tableData"
    tooltip-effect="light"
    style="width: 100%"
    @expand-change="handle_list"
  >
    <el-table-column prop="children" type="expand" width="100">
      <template slot-scope="slots">
        <el-table
          ref="subTableData"
          :data="slots.row.children"
          tooltip-effect="light"
          @expand-change="handle_subList"
        >
          <el-table-column prop="children" type="expand" width="100">
            <template slot-scope="scopes">
              <el-table
                ref="secSubTableData"
                :data="scopes.row.children"
                tooltip-effect="light"
              >
                <el-table-column prop="portNumber" label="编号" />
                <el-table-column prop="name" label="名称" />
                <el-table-column prop="ip" label="IP" />
                <el-table-column label="操作" width="200">
                  <template slot-scope="scope">
                    <el-button type="text" class="primary-text" @click="handle_edit(scope.row)">编辑</el-button>
                  </template>
                </el-table-column>
              </el-table>
            </template>
          </el-table-column>
          <el-table-column prop="number" label="编号" />
          <el-table-column prop="size" label="大小" />
          <el-table-column label="操作" width="200">
            <template slot-scope="scope">
              <el-button type="text" class="danger-text" @click="handle_delete(scope.row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </template>
    </el-table-column>

    <el-table-column label="ID" show-overflow-tooltip>
      <template slot-scope="scope">{{ scope.row.rtuId }}</template>
    </el-table-column>
    <el-table-column label="名称" show-overflow-tooltip>
      <template slot-scope="scope">
        <div @click="handle_jump(scope.row)">
          <span size="medium">{{ scope.row.name }}</span>
        </div>
      </template>
    </el-table-column>
    <el-table-column prop="count" label="数量" />
  </el-table>
</div>

当触发展开子表格的方法,二级嵌套类似,省略…

handle_list(row) {
      getSubTableData({ id: row.id})
        .then(response => {
          if (response.data.result === '1') {
            const tableArr = JSON.parse(JSON.stringify(response.data.resultObj))
            arr.forEach(element => {
              Vue.set(element, 'children', [])
            })
            row.children = tableArr
          } else {
            this.$message.error(response.data.resultInfo)
          }
        })
        .catch(error => {
          this.$message.error(error)
        })
    },

结果截图，省略