解决el-table最后一列样式重叠问题

问题描述

table

如上图：el-table 最后一列设置为 fixed="right" 后，如果页面宽度不足，数据列较多，移动底部横向滚动条，可以看到其他列和最后一列文字重叠了。

之前的同事解决方法是设置最后一个单元格的背景色，

1
2
3


.table-line-row td:last-child {
  background-color: #062462 !important;
}

但是考虑到系统中表格很多，这样设置会导致其它表格的样式有点奇怪。

解决方法

查阅了 element 文档，找到官方推荐的，通过 JS 来设置表格的样式。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46


<el-table :cell-style="setCellStyle">
    <el-table-column
        type="index"
        align="center"
        label="序号"
        width="80">
    </el-table-column>
     <!-- 省略其他列 -->
    <el-table-column
        fixed="right"
        label="操作"
        width="180"
        align="center">
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="text"
            @click="handleUpdate(scope.$index, scope.row)">
            编辑</el-button>
          <el-button
            size="mini"
            type="text"
            @click="handleDelete(scope.$index, scope.row)"
            class="color-danger">
          删除</el-button>
        </template>
    </el-table-column>
</el-table>

<!-- ... -->

<script>
    export default{
     methods: {
         // 防止最后一列文字重叠
        setCellStyle({ row, column, rowIndex, columnIndex }){
          let columns = [13]; //最后一列的索引
          if (columns.indexOf(columnIndex) > -1) {
            return "background-color: #031337;";
          } else {
            return "";
          }
        },
     }
    }
</script>

table fixed

实现效果如上图，样式上满足了我们的需求。

更好的解决方案

但是项目中使用的表格比较多，不同表格的列数也不等，每次手动获取最后一列的索引也比较麻烦。

目前最佳的解决方法是：

1
2
3
4


// 最后一列重叠问题
.tableClass .el-table__fixed-right{
  background-color: #031337;
}

在全局的样式文件中增加一个类，如果表格需要处理这个问题，就给el-table增加一个 class="tableClass"。