table表格列合计 vue+element table表格列合计

// 列求和
    getSummaries(param) {
      const { columns, data } = param; // 这里可以看出,自定义函数会传入每一列,以及数据
      const sums = [];
      columns.forEach((column, index) => {
        if (index === 0) {
          sums[index] = '总计';
          return;
        } else if (index >= 1) { // index>=1后的列进行求和               
          // 页面分别统计 处理
          const values = data.map(item => item[column.property]);
          if (!values.every(value => isNaN(value))) {
            sums[index] = values.reduce((prev, curr) => {
              const value = curr;
              if (!isNaN(value)) {
                return parseFloat((prev + curr).toFixed(10));
              } else {
                return prev;
              }
            }, 0);
            // 此处结合了方式一的判断处理,实现多种条件处理
            // 此处的column.property获取的值对应中prop对应的字段
            switch (column.property) {
              case "total1":
              case "total2":
                return sums[index] = sums[index];
                break;
            }

          } else {
            sums[index] = '--'; // 如果列的值有一项不是数字,就显示这个自定义内容
          }
        } else {
          sums[index] = '--'
        }
      });
      return sums; // 最后返回合计行的数据
    },

注意:

要在 加入

show-summary

:summary-method="getSummaries"

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