【vxe-table】表尾合计行，数据处理方法footer-method的使用

春晓_春眠花落

已于 2023-04-17 10:25:43 修改

阅读量7.8k

点赞数 5

CC 4.0 BY-SA版权

分类专栏： vxe-table 文章标签： vue.js

于 2023-04-14 16:10:17 首次发布

本文链接：https://blog.csdn.net/weixin_49668076/article/details/130154953

vxe-table 专栏收录该内容

7 篇文章

订阅专栏

文章介绍了在el-table和vxe-table组件中如何实现表格数据的列合计功能。通过show-summary,summary-method或show-footer,footer-method属性结合自定义方法，可以轻松计算并展示表尾的总计。示例代码详细展示了如何处理和格式化数值，包括总价计算和货币格式化。

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

当我们使用el-table的时候，文档上相对清晰的给出了示例，浅浅的截下图
在这里插入图片描述

show-summary和summary-method配合使用
在这里插入图片描述

      getSummaries(param) {
        const { columns, data } = param;
        const sums = [];
        columns.forEach((column, index) => {
          if (index === 0) {
            sums[index] = '总价';
            return;
          }
          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);
            sums[index] += ' 元';
          } else {
            sums[index] = 'N/A';
          }
        });

        return sums;
      }

基本上不需要改什么，直接用就可以

然后说vxe-table的表尾合计，也不难，show-footer和footer-method搭配使用
在这里插入图片描述

在这里插入图片描述

 <vxe-table
          class="vxetable "
          :data="tableData"
          border        
          resizable       
          :footer-method="footerMethod"
          :show-footer="true"         
        >

    footerMethod({ columns, data }) {
      const footerData = [
        columns.map((column, _columnIndex) => {
          if (_columnIndex === 0) {
            return '合计'
          }
          if (['qty'].includes(column.field)) {
            return this.sumNum(data, 'qty')
          }
          if (['sum'].includes(column.field)) {
            return this.sumNum(data, 'sum')
          }
          return null
        }),
      ]
      return footerData
    },

    // 进行合计
    sumNum(costForm, type) {
      if (type == 'qty') {
        let total = 0
        for (let i = 0; i < costForm.length; i++) {
          total += costForm[i].qty
        }
        return this.moneyFilter(total)
      } else {
        let total = 0
        for (let i = 0; i < costForm.length; i++) {
          total += costForm[i].sum
        }
        return this.moneyFilter(total)
      }
    },

在这里插入图片描述

 moneyFilter (value) {
  if (!value) return '0.00'
  value = value - 0
  return value.toFixed(2).replace(/(\d)(?=(\d{3})+\.)/g, '$1,')
}