vue+element ui实现表格的合计功能

效果:

vue+element ui实现表格的合计功能_第1张图片

 在vue中想实现合计功能,需要在 标签中增加

:summary-method="getSummaries"

然后在methods中增加方法:(改变column.label即可)

getSummaries(param) {
      const {columns, data} = param;
      const sums = [];
      columns.forEach((column, index) => {
        if (index === 0) {
          sums[index] = '总计';
          return;
        }
        if (column.label === '完成数量' || column.label === '未完成数量' || column.label === ***数量') {

        } else {
          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] = sums[index].toLocaleString()
        } else {
          sums[index] = '';
        }
      });

      return sums;
    }

你可能感兴趣的:(vue.js,前端,javascript)