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

若想合并合计行的列

<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;
    },
}
  • 6
    点赞
  • 7
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值