element表格合计置顶

228 阅读1分钟

一、合计行置顶,改变样式即可解决

/* 合计放顶上 */
.el-table {
  display: flex;
  flex-direction: column;
}
.el-table .el-table__body-wrapper {
    order: 1;
  }

二、自定义合计

<el-table v-loading="loading" :data="statList" :summary-method="getSummaries" show-summary>
getSummaries(param) {
      const { columns, data } = param;
      console.log(columns, data)
      const sums = [];
      columns.forEach((column, index) => {
        if (index === 0) {
          sums[index] = '合计';
          return;
        }
        if(index===3 ||index===4 ||index===5 ||index===6 ||index===7 ){
          // if(index===3){
          const values = data.map(item => Number(item[column.property]));
          
          console.log(values)
          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);
          } else {
            sums[index] = '';
          }
        }
      });

      return sums;
    },