合并表尾单元格前三列为1格#xff1b;对某些指定的单元格进行表尾合计#xff1b;合计后的文本样式加粗#xff1b;涉及到金额需要千…问题背景

最近在做后台管理项目el-table

合并表尾单元格前三列为1格对某些指定的单元格进行表尾合计合计后的文本样式加粗涉及到金额需要千分位分割并保留两位小数

先看下element-plus

:summary-methodgetSummaries:span-methodspanMethod

是否在表尾显示合计行summary-method自定义的合计计算方法span-method合并行或列的计算方法

el-table表尾合计行

对某些指定的单元格进行表尾合计涉及到金额需要千分位分割并保留两位小数

script

toFixedThousandFilter(num:undefined|number|string,

fixed

0).toFixed(fixed).replace(/^-?\d/g,

(m)

m.replace(/(?(?!\b)(\d{3})$)/g,

,))

存储已经处理过的blocCustNm避免重复计算同个集团客户const

sumArr

只对接口返回的这几个字段进行表尾合计columns.forEach((column,

index)

!uniqueBlocCustNm.has(item.blocCustNm))

{blocLmtSum

Number(item[column.property])if

(item.blocCustNm)

{uniqueBlocCustNm.add(item.blocCustNm)}}})sums[index]

toFixedThousandFilter(blocLmtSum)}

else

(sumArr.includes(column.property))

{const

Number(item[column.property]))sums[index]

sums

tableRef.value.$el.querySelector(.el-table__footer-wrapper).querySelector(.el-table__footer)const

cell

current.rows[0].cellscell[0].style.textAlign

center

合计行第一列字段居中显示cell[1].style.display

none

隐藏被合并的单元格不隐藏的话会占位。

cell[0].colSpan

合并单元格return

}参考el-table合计行单元格合并、合并行金额四舍五入保留两位小数、合计行样式修改