Vue ElementUI中el-table表格嵌套样式问题小结
作者：Lemon今天学习了吗
这篇文章主要介绍了Vue ElementUI中el-table表格嵌套样式问题小结,两个表格嵌套,当父表格有children数组时子表格才展示,对Vue ElementUI中el-table表格嵌套样式问题感兴趣的朋友跟随小编一起看看吧
一、表格嵌套要求：
- 两个表格嵌套，当父表格有children数组时子表格才展示；
- 子表格数据少于父表格展示字段，且对应固定操作列不同；
二、嵌套问题：
当使用el-table的type='expand'实现表格嵌套时，样式出现以下问题：
- 展开图标每条数据都展示了，实际上接口数据并不是都有children数组；
- 在表格嵌套后，打开子表格，高亮显示在经过子表格后对应不上；
- 父表格的操作列固定在右侧影响了子表格的显示；
- 滑动到表格底部时，父子表格的固定列对不齐；
修改前效果如下：
修改后效果如下：
三、代码实现：
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-table
ref="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 }) {
// 把每一行的索引放进row
row.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>到此这篇关于Vue ElementUI中el-table表格嵌套样式问题的文章就介绍到这了,更多相关Vue ElementUI中el-table表格嵌套内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！