element table合计行在页面初次不显示问题

1、在表头添加方法

 :summary-method="getSummaries"
  show-summary
<el-table
      v-loading="loading"
      id="drag-table"
      ref="table"
      :data="data"
      :height="theight"
      :summary-method="getSummaries"
      show-summary
      resizable
      border
      style="width: 100%">

2、js中写方法 getSummaries()
table合计行在初始页面不显示,只有浏览器或者页面其他尺寸发生变化才显示。改变高度使其强制刷新

    getSummaries(param) {
      const { columns, data } = param
      const sums = []
       // 解决elementUI table合计行初始页面不显示问题  this.height由父组件传递过来 this.theight未表格绑定的高度
       //延时执行   要不然会一直刷新
      window.setTimeout(() => {
        if (this.theight === this.height) {
          this.theight -= 0.5
        } else {
          this.theight = this.height
        }
      }, 1000)
      columns.forEach((column, index) => {
        if (index === 0) {
          sums[index] = '合计'
          return
        }
        if (column.property === 'serviceDistance' || column.property === 'rangePrice' || column.property === 'mileageCharge' || column.property === 'addVolume' || column.property === 'maintenanceTeamSum') {
          const values = data.map(item => Number(item[column.property]))
          if (!values.every(value => isNaN(value))) {
            sums[index] = values.reduce((prev, curr) => {
              const value = Number(curr)
              if (!isNaN(value)) {
                return prev + curr
              } else {
                return prev
              }
            }, 0)
            if (column.property === 'maintenanceTeamSum') {
              sums[index] += ' 人'
            } else if (column.property === 'addVolume') {
              sums[index] += ' kg/月'
            } else if (column.property === 'serviceDistance') {
              sums[index] += ' km'
            } else if (column.property === 'rangePrice') {
              sums[index] += ' 元/km'
            } else {
              sums[index] += ' 元'
            }
          } else {
            sums[index] = ''
          }
        }
      })
      return sums
    }

在这里插入图片描述

你可能感兴趣的:(table,表格自定义合计,vue.js)