Vue ElementUI中el-table表格嵌套样式问题

一、表格嵌套要求：

1. 两个表格嵌套，当父表格有children数组时子表格才展示；
2. 子表格数据少于父表格展示字段，且对应固定操作列不同；

二、嵌套问题：

当使用el-table的type='expand'实现表格嵌套时，样式出现以下问题：

1. 展开图标每条数据都展示了，实际上接口数据并不是都有children数组；
2. 在表格嵌套后，打开子表格，高亮显示在经过子表格后对应不上；
3. 父表格的操作列固定在右侧影响了子表格的显示；
4. 滑动到表格底部时，父子表格的固定列对不齐；

修改前效果如下：

修改后效果如下：

三、代码实现：

1、表格定义唯一值row-key="indexId"和类名:row-class-name="getRowClass"

  <el-table:row-class-name="getRowClass"ref="table"v-loading="tableLoading"size="mini"height="100%":data="tableData"row-key="indexId"tooltip-effect="dark":header-cell-style="{background: '#f5f7fa',fontWeight: 'bold',color: '#303133'}"@expand-change="expandChange"border><el-table-column type="expand"><template slot-scope="props"><!-- 表格嵌套第二层 --><el-tableref="sonTable":style="{height: `${(props.row.children.length + 1) * 36 + 1}px`,width: '100%'}"row-key="indexId":data="props.row.children"tooltip-effect="dark":header-cell-style="{background: '#f5f7fa',fontWeight: 'bold',color: '#303133'}"border>    <!-- 子表格字段 --><el-table-column> XXX </el-table-column></el-table><!-- 父表格字段 --><el-table-column> XXX </el-table-column></el-table>

2、类名判断

    // 表格类名方法getRowClass({ row, rowIndex }) {// 把每一行的索引放进rowrow.index = rowIndex// 判断当前行是否有子数据if (row.children === null ||row.children === undefined ||row.children.length === 0) {return 'row-hidden-expand-icon'} else {return 'row-show-icon'}},

3、表格样式

<style lang="scss" scoped>// 子表格覆盖右侧fix
::v-deep .el-table__body-wrapper {.el-table__expanded-cell {z-index: 100;}
}// 有子表格才显示展开箭头
:deep(.row-hidden-expand-icon) {td {&:first-child {.el-icon {visibility: hidden;}}.el-table__expand-icon {pointer-events: none;}}
}// 去掉表格的第三、第四个单元格出现的展开图标
:deep(.el-table__row) {.el-table__cell {&:nth-child(3),&:nth-child(4) {.el-table__expand-icon {pointer-events: none;display: none;}}}
}// 子表格样式
:deep(.el-table__expanded-cell) {padding: 10px !important;
}// 修复hover高亮不同步
::v-deep .el-table__body tr.hover-row > td.el-table__cell {background-color: transparent;
}::v-deep .el-table .el-table__row:hover {background-color: #f5f7fa;
}::v-deep .el-table__expanded-cell:hover {background-color: transparent;
}// 修复滚到下面对不齐
::v-deep .el-table__fixed-body-wrapper .el-table__body {padding-bottom: 12px;
}// 使得每一行都为36px高度
::v-deep .row-show-icon {td {&:first-child {.cell {height: 24px;}}}
}
:deep(.el-table .el-table__cell) {height: 36px !important;
}
</style>