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

若想設(shè)置滾動條樣式

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

若想合并合計行的列文章來源地址http://www.zghlxwxcb.cn/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'; // 數(shù)量對應(yīng)上方隱藏的格子
        }
      });
    },
    // 自定義行
    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`] : '--';
        }
      });
      // 返回和列的數(shù)量相等的數(shù)組
      return sums;
    },
}

到了這里，關(guān)于element-ui table表格 增加合計行 和 表格列固定之后 滾動條無法滾動的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！