在element plus提供的初始方法里根据实际需求进行更改
自定义方法
首先在el-table加入自定义方法
<el-table
id="table"
ref="tableRef"
v-loading="loading"
border
:data="state.tableList"
highlight-current-row
:summary-method="getSummaries"
show-summary
style="width: 100%"
>
其中
show-summary 表尾显示合计效果
:summary-method = ''getSummaries" 自定义表尾合计方法
然后在js部分编写自定义方法
//计算表尾合计
import type { TableColumnCtx } from 'element-plus'
interface Product {
street: string
// id: string
// name: string
// amount1: string
// amount2: string
// amount3: number
}
interface SummaryMethodProps<T = Product> {
columns: TableColumnCtx<T>[]
data: T[]
}
const getSummaries = (param: SummaryMethodProps) => {
const { columns, data } = param
const sums: string[] = []
columns.forEach((column, index) => {
if (index === 0) {
// sums[index] = 'Total Cost'
sums[index] = '合计'
return
}
if (index === 3) {
sums[index] = ''
return
}
const values = data.map((item) => Number(item[column.property]))
// console.log(values, '表尾合计')
// if (!values.every((value) => Number.isNaN(value)))
if (!values.some((value) => Number.isNaN(value))) {
sums[index] = ` ${values.reduce((prev, curr) => {
const value = Number(curr)
if (!Number.isNaN(value)) {
return prev + curr
} else {
return prev
}
}, 0)}`
} else {
sums[index] = ''
}
})
return sums
}
这里 我的处理条件为 首先 不展示index为3 的数字类型 我取的是数据字典 会转为文本效果
使用some做了一个筛选。如果该列的数据存在不为number类型的数据
显示为空字符串 其余的进行累加操作。