element中el-table（合计）计算指定列

最新推荐文章于 2025-03-07 12:12:15 发布

LW0512

最新推荐文章于 2025-03-07 12:12:15 发布

阅读量1.9k

点赞数 1

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

本文链接：https://blog.youkuaiyun.com/LW0512/article/details/128919941

版权

vue 专栏收录该内容

12 篇文章

订阅专栏

本文介绍了如何在 Element UI 的 el-table 组件中实现指定列的合计值显示，针对前端开发中使用 Vue.js 和 JavaScript 的场景。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

element中el-table（合计）计算指定列

在这里插入图片描述

想要某列展示合计数值的

 <el-table
        :data="tableData"
        style="width: 100%"
        :header-cell-style="{ background: '#F8F9FB' }"
        :summary-method="getSummaries" //重点1
        show-summary//重点2
      >
    <el-table-column align="center" label="余额" min-width="100" prop="money">//重点3 prop=""
          <template slot-scope="{ row }">
            {{ row.money || '-' }}
          </template>
        </el-table-column>
     </el-table>

 // 计算总计价格
    getSummaries(param) {
      const { columns, data } = param //这里可以看出，自定义函数会传入每一列，以及数据
      const sums = []
      columns.forEach((column, index) => {
        if (index === 0) {
          sums[index] = '合计'
          return
        } else if (index === 3 || index === 4) {
          //index===2||index===8和9和12后的列进行求和
          //页面分别统计 处理
          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)

            //此处结合了方式一的判断处理，实现多种条件处理
            //此处的column.property获取的值对应<el-table-column>中prop对应的字段
            switch (column.property) {
              case 'total1':
              case 'total2':
              case 'total3':
                return (sums[index] = sums[index])
                break
            }
          } else {
            sums[index] = '' //如果列的值有一项不是数字，就显示这个自定义内容
          }
        } else {
        }
      })
      return sums //最后返回合计行的数据
    },