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

这篇具有很好参考价值的文章主要介绍了element-ui 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; 
  }

若想设置滚动条样式

/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;
  }

若想合并合计行的列文章来源地址https://www.toymoban.com/news/detail-610325.html

<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;
    },
}