el-table summaryMethod 的实现

使用说明

element-ui使用手册-table
大体就是我们在 el-table 的时候给

// 属性设置
   :summary-method="getSummaries"
    show-summary
    sum-text="总价"

// 回调函数
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;
      }

源码实现说明

el-table 组件的props设置

传到 table-footer 组件里面使用

找到组件调用的地址

到组件里面看到 render() 函数里面上来就用到了 summaryMethod

可以看到，这个组件没有直接用 tfooter 标签，仍然是用 table 来模拟实现的，将 sums 中数据组装到 html 标签内部，从而渲染出来