element-ui table表格 增加合计行 和 表格列固定之后 滚动条无法滚动_elmenui table组件右侧固定了表格列 竖向滚动条消失 了

element-ui table表格 增加合计行 和 表格列固定之后 滚动条无法滚动

是因为el-table__fixed或el-table__fixed-right有了合计之后把 el-table__body-wrapper层覆盖 el-table__fixed或el-table__fixed-right层级较高 因此点击滚动条失效
解决方法：

// 这样点击事件就能穿透上层元素，可点击到被遮挡元素，
/deep/ .el-table__fixed {
    pointer-events: none;
  }
  /deep/ .el-table__fixed-right {
    pointer-events: none; 
  }
1
2
3
4
5
6
7

若想设置滚动条样式

/deep/ .el-table__body-wrapper::-webkit-scrollbar {
    width: 8px; // 横向滚动条
    height: 8px; // 纵向滚动条
    }
  // 滚动条的滑块
  /deep/ .el-table__body-wrapper::-webkit-scrollbar-thumb {
  background-color: #ddd;
  border-radius: 3px;
  }
1
2
3
4
5
6
7
8
9

若想合并合计行的列

<el-table
        ref="table"
        :data="tableData"
        border
        show-summary
        :span-method="arraySpanMethod"
        :summary-method="getSummaries"
        :max-height="tableHeight"
      >
      </el-table>
methods:{
 arraySpanMethod() {
      this.$nextTick(() => {
        if (this.$refs.table.$el) {
          const current = this.$refs.table.$el
            .querySelector('.el-table__footer-wrapper')
            .querySelector('.el-table__footer');

          const cell = current.rows[0].cells;
          // 若想合并几行就将几个隐藏
          cell[1].style.display = 'none';
          cell[2].style.display = 'none';
          cell[3].style.display = 'none';
          cell[4].style.display = 'none';
          cell[5].style.display = 'none';
          cell[6].style.display = 'none';
          cell[0].colSpan = '7'; // 数量对应上方隐藏的格子
        }
      });
    },
    // 自定义行
    getSummaries(param) {
      if (!this.tableTotal) return [];
      const { columns } = param;
      const sums = [];
      columns.forEach((column, index) => {
      // 前六列
        if (index <= 6) {
          sums[index] = '';
          // 去掉序号
          sums[index] = index === 1 ? '汇总信息' : '';
        } else if (column.property === 'allSinglesum') {
          sums[index] = this.tableTotal.AllSum;
        } else {
          sums[index] = this.tableTotal[`${column.property}AllSum`]
            ? this.tableTotal[`${column.property}AllSum`] : '--';
        }
      });
      // 返回和列的数量相等的数组
      return sums;
    },
}
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
48
49
50
51
52