el-table 合计行的修改

2022-11-13  本文已影响0人  jeneen1129

eltable 有三个配置参数配置合计行

:show-summary="showSummary"
:sum-text="sumText"
:summary-method="summaryMethod"

本次需求是希望能够合计行有一些行合并,前面的序号处不用显示
代码实现如下:

// 合计
  summaryMethod(param: any) {
    const { columns, data } = param
    let sums: string[] = []
    columns.forEach((column: any, index: number) => {
      if (index === 2) {
        sums[index] = '本页合计:\n合计:'
        return
      }
      // 指定某一列计算
      if (index === 3) {
        const values = data.map((item: any) => item['xxxx'])
        sums[index] = values.reduce((total: any, curr: any) => {
          const value = Number(curr)
          if (!isNaN(value)) {
            return Number(total) + Number(curr)
          } else {
            return Number(total)
          }
        }, 0)
        sums[index] = (sums[index] as any).toFixed(2) + '\n' + '1000.00'
        return
      }
    })
    this.setSumRowSpan()
    return sums
  }

  setSumRowSpan() {
    let that = this
    setTimeout(function () {
      if (that.$el.querySelector('#table')) {
        const tds: any = document.querySelectorAll(
          '#table .el-table__footer-wrapper tr>td'
        )
        const td: any = document.querySelector(
          '#table .el-table__footer-wrapper'
        )
        // fixed 中前面的序号是使用的该里面的,后面显示使用的 非  fixed 的,这个需要注意,可自行去定义逻辑
        const tdsFixed: any = document.querySelectorAll(
          '#table .el-table__fixed-footer-wrapper tr>td'
        )
        for (let i = 0; i < tdsFixed.length; i++) {
          if (i == 2) {
            tds[i].colSpan = 8
            tdsFixed[i].colSpan = 8
            tds[i].style.textAlign = 'center'
            tdsFixed[i].style.textAlign = 'center'
          }
          if (i > 3) {
            tds[i].classList.add('is-hidden')
            tdsFixed[i].classList.add('is-hidden')
          }
        }
        td.style.position = 'absolute'
        td.style.left = '0'
        td.style.bottom = '0'
      }
    }, 10)
  }
上一篇 下一篇

猜你喜欢

热点阅读