element组件库的table组件设置数据自定义汇总已经合计放到表头_elementui表格合计放到顶部

1.自定义数组汇总（自定义方法）

①添加自定义方法getSummaries

 
<el-table show-summary :summary-method="getSummaries"></el-table>

②自定义方法累加

getSummaries(param) {
  
        const { columns, data } = param;
        const sums = [];
        columns.forEach((column, index) => {
          // column 是每一列，index 表示列的索引，第一列的时候不计算合计，显示自定义的文字内容
          if (index === 0) {
            sums[index] = '合计';
            return;
          }
          //下面这一坨代码就是把每一列中的所有单元格中的值转化成Number型，
          //然后对转化后的结果进行判断，如果是number型，则进行累加，
          //如果NaN型，说明单元格里是一些无法转化成number型的值，则返回自定义的内容
          // console.log(this.noticeList);
            const values = data.map(item => Number(item[column.property]));
            // console.log(column);
            // 判断需要统计数据的列
            if (column.property === 'arrivalQty'||column.property === 'qty'||column.property === 'costPrice'||column.property === 'arrivalCostPrice'||column.property === 'transitQty'||column.property === 'amount'||column.property === 'arrivalAmount'||column.property === 'transitAmount') {
              sums[index] = values.reduce((prev, curr) => {
                const value = Number(curr);
                if (!isNaN(value)) {
                  return prev + curr;
                } else {
                  return prev;
                }
              }, 0);
              if(column.property === 'transitQty'||column.property === 'arrivalQty'){
                // 处理数据的格式为千分位逗号隔开
                sums[index]=sums[index].toLocaleString('zh-CN').replace(/\./g, '');
                // console.log(sums[index]);
              }
              else{
                // 处理数据的格式为千分位逗号隔开，数据保留两位小数
                sums[index]=sums[index].toLocaleString('zh-CN', {style: 'currency',currency: 'CNY',}).slice(1)
              }
            } else {
              sums[index] = '/';
            }
        });
        // console.log(sums);
        return sums;
      },

2.后端传入汇总数据拼接

将汇总的数据加入到获取的表格数据的第一行

 
        await getSumNoticeList(this.queryParams).then(res=>{
                this.noticeList = res.rows;
 
            })
            await getsummaryListTotal(this.queryParams).then(res=>{
 
              this.noticeList.unshift(res.rows[0])
            })

如果需要排序控制汇总的数据保持在第一行，可以加上一个@sort-change="soltHandle"方法

soltHandle (column) {
        //不参与排序的数组
        let freeGood = []
        //参与排序的数组
        let elseFree = []
        //fieldName 为对应列的prop
        let fieldName = column.prop
        let sortingType = column.order
        console.log(fieldName,sortingType);
        //降序
        if (sortingType == "descending") {
          this.noticeList.forEach((item,index) => {
            //在整个tableData中找到不参与排序的所有数据
            if (index==0) {
              //不参与排序的所有数据加到数组中
              freeGood.push(item)
              
            }
            else {
              //参与排序的数据
              elseFree.push(item)
            }
          })
          this.noticeList = elseFree.sort((a, b) => {
            if (typeof a[fieldName] == 'string') {
              return b[fieldName].localeCompare(a[fieldName])
            } else if (typeof a[fieldName] == 'number') {
              return b[fieldName] - a[fieldName]
            }
          })
 
          this.noticeList = [...freeGood,...this.noticeList ]
        } else {
          this.noticeList.forEach((item,index) => {
            if (index==0) {
              freeGood.push(item)
            } else {
              elseFree.push(item)
            }
          })
          this.noticeList = elseFree.sort((a, b) => {
            if (typeof a[fieldName] == 'string') {
              return a[fieldName].localeCompare(b[fieldName])
            } else if (typeof a[fieldName] == 'number') {
              return a[fieldName] - b[fieldName]
            }
          })
          this.noticeList = [...freeGood,...this.noticeList ]
        }
        console.log(this.noticeList);
        },