el-table 表尾合计行不计算某些行

golden_kitty

已于 2024-03-14 09:28:51 修改

阅读量447

点赞数 2

分类专栏： Vue3 文章标签： vue.js 前端 javascript

于 2024-03-14 09:25:36 首次发布

本文链接：https://blog.csdn.net/qq_37494968/article/details/136698080

版权

Vue3 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

一、需求

el-table计算表尾合计行时，某些行（例如无效数据）不计入求和计算

二、代码

<el-table :data="tableData" show-summary :summary-method="getSummary">
   <el-table-column label="统计日期" prop="statisticsDate">
   </el-table-column>
   <!-- 其他表格数据 -->
</el-table>

// 自定义表格合计
const getSummary = (param) => {
  const { columns, data } = param
  const sums = []
  columns.forEach((column, index) => {
    // ticketState == 2 无效数据不加入求和 ⭐⭐⭐
    let validData = data.filter(item => item.ticketState != 2)
    const values = validData.map((item) => Number(item[column.property]))
	// 想自定义求和的列
    if (index === 17 || index === 18 || index === 19 || index === 20 || index === 21) {  
      // Number.isNaN(value)) 判断value是否是数值类
      if (!values.every((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
}