elementui el-table折叠表格，点击主表数据展开从表明细

news2024/11/23 11:13:20

用element-ui 的el-table实现：主表table可实现展开行显示关联的明细表table的列表数据，效果图如下
在这里插入图片描述

    <el-table
      ref="tableData"
      v-loading="listLoading"
      :data="tableData"
      row-key="id"
      border
      stripe
      highlight-current-row
      style="width: 100%"
      max-height="500"
      @row-click="handleRowClick"
      @expand-change="expandChange"
    >
      <el-table-column type="expand">
        <template slot-scope="scope">
          <el-table :data="scope.row.tableDetailData" size="mini" style="width: 95%;margin-left: 8%;">
            <el-table-column prop="spotCheckItems" label="点检项目" align="center" />
            <el-table-column prop="spotCheckPattern" label="点检类型" align="center" :formatter="formatterSpotCheckPattern" />
            <el-table-column prop="results" label="点检结果" align="center" :formatter="formatterResults" />
            <el-table-column prop="createTime" label="点检日期" align="center" />
          </el-table>
          <el-col :span="24" class="toolbar">
            <el-pagination
              style="float: right"
              :total="scope.row.detailTotal"
              :current-page="detailCurrentPage"
              :page-sizes="[5, 10, 20, 30]"
              :page-size="detailPageSize"
              layout="total, sizes, prev, pager, next, jumper"
              @size-change="handleDetailSizeChange"
              @current-change="handleDetailCurrentChange"
            />
          </el-col>
        </template>
      </el-table-column>
      <el-table-column prop="equipmentBarcode" label="设备条码" align="center" />
      <el-table-column prop="equipmentName" label="设备名称" width="150" align="center" />
      <el-table-column prop="createTime" label="点检日期" for align="center" />
      <el-table-column prop="results" label="点检结果" align="center" :formatter="formatterResults" />
      <el-table-column prop="workorderNo" label="维保工单号" align="center" />
      <el-table-column prop="maintainResult" label="维保结果" align="center" />
    </el-table>

一.开启el-table展开行的功能
通过设置 type=“expand” 和 Scoped slot 可以开启展开行功能

      <el-table-column type="expand">
        <template slot-scope="scope">
          <el-table :data="scope.row.tableDetailData" >
            <el-table-column prop="spotCheckItems" label="点检项目" align="center" />
            <el-table-column prop="spotCheckPattern" label="点检类型" align="center" :formatter="formatterSpotCheckPattern" />
            <el-table-column prop="results" label="点检结果" align="center" :formatter="formatterResults" />
            <el-table-column prop="createTime" label="点检日期" align="center" />
          </el-table>
        </template>
      </el-table-column>

二.展开行时，会触发 expan-change事件，自定义一个expandChange方法，用于在展开行时加载明细表数据

    /** 点击主表格行，获取子表格明细 */
    expandChange(row) {
      // 设置当前行为选中行
      this.$refs.tableData.setCurrentRow(row)
      var obj = {
        recordId: row.id
      }
      this.detailListLoading = true
      SOPTCHECKRECORDAPI.queryEquipSpotCheckRecordDetailList(obj, this.detailCurrentPage, this.detailPageSize).then(
        (res) => {
          this.detailListLoading = false
          this.$set(row, 'tableDetailData', res.data.records)
          this.$set(row, 'detailTotal', res.data.total)
        }
      )
    },

这个方法会传入一个参数，用console.info(val)可知，这是这个主表行的记录，根据主表id查询获取子表记录，用this.$set，将子表list放入主表中。

三.若要同时实现点击主表行展开明细表，需要添加点击行时间
@row-click=“handleRowClick”

      // 点击主表行展开明细
    handleRowClick(row, event, column) {
      // tableData为主表table的ref属性值
      this.$refs.tableData.toggleRowExpansion(row)
    },