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