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

目录

• 一、表格嵌套要求：
• 二、嵌套问题：
• 三、代码实现：

  <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>

    // 表格类名方法
    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'
      }
    },

<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>