修改el-table表格的滚动条式样后出现式样错位的问题_table滚动样式被更改

最近根据ui的最新式样改了el-table的表格式样，出现以下问题

想要的效果：

根据调查，最终的解决方式如下：

 // 解决表格固定列问题
.el-scrollbar__wrap::-webkit-scrollbar {
    width: 6PX !important;
    height: 6PX !important;
  }
  // 不同尺寸表格修改固定列内容区的高度,  本人这里只罗列了mini与small尺寸的
  .el-table--mini {
    .el-table__fixed,
    .el-table__fixed-right {
      .el-table__fixed-body-wrapper {
        // mini表格, 表头高度为36px, 所以这里减36
        height: calc(100% - 36PX) !important;
      }
    }
  }

  .el-table--small {
    .el-table__fixed,
    .el-table__fixed-right {
      .el-table__fixed-body-wrapper {
        // small表格
        height: calc(100% - 40PX) !important;
      }
    }
  }

  .el-table__fixed, .el-table__fixed-right {
    height: calc(100% - 6PX) !important;
  }

  // 当表格没有滚动条时
  .el-table__body-wrapper.is-scrolling-none ~ .el-table__fixed-right {
    height: 100% !important;
    bottom: 0 !important;
    box-shadow: none !important;
  }

  // 当表格有纵向滚动条时
  .el-table--scrollable-y .el-table__fixed-right {
    right: 6PX !important;
  }

  // 当表格只有横向滚动条，没有纵向滚动条时
  .el-table--scrollable-x:not(.el-table--scrollable-y) .el-table__fixed-right {
    right: 0 !important;
  }

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
47

设置max-height后滚动条式样修改问题

element的table组件有一个max-height参数可以设置表格组件的最大高度。

如果数据过多，在最大高度内展示不开，就会自动加一个滚动条，进行滚动展示。

如果数据很少，没有达到最大高度，那么右侧不应该有滚动条，和一切干扰列。

但是当我设置了max-height ，且我这个地方没有达到最大高度，就会在表格右侧出现一列空白的占位，这样比较丑。怎么去掉这一列空白呢？

/deep/ .el-table th.gutter{
  display: none;
  width:0
}
/deep/ .el-table colgroup col[name='gutter']{
  display: none;
  width: 0;
}
/deep/ .el-table__body{
  width: 100% !important;
}
1
2
3
4
5
6
7
8
9
10
11