element table合计行不显示问题

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
    }

在这里插入图片描述

  • 3
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值