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


使用步骤

效果图
在这里插入图片描述

1.添加表格自定义合计api— show-summary 和 summary-method

代码如下(示例):

  <el-table
          :data="tableDataOfRight"
          style="width: 100%"
          :height="rightHeight"
          size="medium "
          highlight-current-row
          border
          show-summary
          :summary-method="totalOutPrice"
        >

2.通用summary-method方法,直接拷贝使用需自行修改不进行合计列的字段

代码如下(示例):
price 是第一列的绑定字段

 totalOutPrice(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 != 'price') {
          sums[index] = values.reduce((prev, curr) => {
            const value = Number(curr);
            if (!isNaN(value)) {
              return prev + curr;
            } else {
              return prev;
            }
          }, 0);
          sums[index];
        }
      });
      return sums
    },

Logo

前往低代码交流专区

更多推荐