fixed+expend同时用存在的样式问题

2024-01-20 10:39:17

问题1：合并单元格样式错乱

当你同时使用fixed和expand-row时，可能会遇到合并单元格样式错乱的问题。这是因为el-table在渲染合并单元格时，会根据expand-row的展开状态来计算合并单元格的范围。如果expand-row处于展开状态，则合并单元格的范围会扩大，导致样式错乱。

为了解决这个问题，你可以使用row-style属性来设置合并单元格的样式。在row-style中，你可以使用is-leaf属性来判断当前行是否为叶子节点。如果是叶子节点，则可以设置合并单元格的样式。

<el-table :data="tableData" :row-style="{ isLeaf: row => row.level > 0 }">
  <el-table-column type="expand">
    <template slot-scope="props">
      <el-table
        :data="props.row.children"
        :row-style="{ isLeaf: row => row.level > 1 }"
      >
        <el-table-column prop="name" label="名称"></el-table-column>
        <el-table-column prop="value" label="值"></el-table-column>
      </el-table>
    </template>
  </el-table-column>
  <el-table-column prop="name" label="名称"></el-table-column>
  <el-table-column prop="value" label="值"></el-table-column>
</el-table>

问题2：固定列样式错位

当你同时使用fixed和expand-row时，可能会遇到固定列样式错位的问题。这是因为el-table在计算固定列的宽度时，会将expand-row的宽度也考虑在内。如果expand-row处于展开状态，则固定列的宽度会变窄，导致样式错位。

为了解决这个问题，你可以使用CSS来调整固定列的宽度。你可以使用以下CSS代码来设置固定列的宽度：

.el-table--fixed {
  width: 200px;
}

问题3：表格嵌套时纵向合并单元格

当你需要在el-table中嵌套表格时，可能会遇到纵向合并单元格的问题。这是因为el-table没有内置的功能来实现纵向合并单元格。

为了解决这个问题，你可以使用CSS来实现纵向合并单元格。你可以使用以下CSS代码来实现纵向合并单元格：

.el-table--nested .el-table__row td[rowspan] {
  vertical-align: top;
}

.el-table--nested .el-table__row td[rowspan] > div {
  display: flex;
  flex-direction: column;
}

.el-table--nested .el-table__row td[rowspan] > div > div {
  border-bottom: 1px solid #ccc;
}