vue使用elementui表格el-table组件指定某列进行合计

原创已于 2022-08-18 10:15:29 修改 · 516 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#elementui #vue.js #javascript

于 2022-08-18 10:14:44 首次发布

前端同时被 2 个专栏收录

59 篇文章

订阅专栏

vue

57 篇文章

订阅专栏

这篇博客介绍了如何在Vue.js应用中结合ElementUI的el-table组件，实现表格数据的列总计功能。通过设置`show-summary`属性和自定义`summary-method`，对'本月库存数量'列进行求和操作，展示了前端开发中表格数据汇总的实现方法。

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

vue使用elementui表格el-table组件指定某列进行合计

 <el-table
          :data="tableData"
          border
          show-summary
          :summary-method="notCount"
          style="width: 100%"
        >
          <el-table-column
            prop="curMonthDamageNum"
            label="本月损坏数量"
            width="120"
            align="center"
          >
          </el-table-column>
          <el-table-column
            prop="curMonthStoreNum"
            label="本月库存数量"
            width="120"
            align="center"
          >
          </el-table-column>
  </el-table>

  //筛选需要合计的列
    notCount(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 (
          column.property == "curMonthStoreNum"
        ) {
          sums[index] = values.reduce((prev, curr) => {
            const value = Number(curr);
            if (!isNaN(value)) {
              return prev + curr;
            } else {
              return prev;
            }
          }, 0);
          sums[index];
        }
      });
      return sums;
    },

在这里插入图片描述