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
}