用element-ui 的el-table实现：主表table可实现展开行显示关联的明细表table的列表数据，效果图如下

    <el-tableref="tableData"v-loading="listLoading":data="tableData"row-key="id"borderstripehighlight-current-rowstyle="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-paginationstyle="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 = trueSOPTCHECKRECORDAPI.queryEquipSpotCheckRecordDetailList(obj, this.detailCurrentPage, this.detailPageSize).then((res) => {this.detailListLoading = falsethis.$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)},

参考文档：
element-ui 中 table表格 展开行 的功能