table合计

一：table含有合计行，且合计行数值前端计算，并赋值单位进行展示。

这是前端进行计算合计数值，合计行和合计行的值都是前端来做，合计数值的非合计行一列的单元格数值相加。

<template>
  <el-table
    :data="tableData"
    border
    show-summary
    style="width: 100%">
    <el-table-column
      prop="id"
      label="ID"
      width="180">
    </el-table-column>
    <el-table-column
      prop="name"
      label="姓名">
    </el-table-column>
    <el-table-column
      prop="amount1"
      sortable
      label="数值 1">
    </el-table-column>
    <el-table-column
      prop="amount2"
      sortable
      label="数值 2">
    </el-table-column>
    <el-table-column
      prop="amount3"
      sortable
      label="数值 3">
    </el-table-column>
  </el-table>

  <el-table
    :data="tableData"
    border
    height="200"
    :summary-method="getSummaries"
    show-summary
    style="width: 100%; margin-top: 20px">
    <el-table-column
      prop="id"
      label="ID"
      width="180">
    </el-table-column>
    <el-table-column
      prop="name"
      label="姓名">
    </el-table-column>
    <el-table-column
      prop="amount1"
      label="数值 1（元）">
    </el-table-column>
    <el-table-column
      prop="amount2"
      label="数值 2（元）">
    </el-table-column>
    <el-table-column
      prop="amount3"
      label="数值 3（元）">
    </el-table-column>
  </el-table>
</template>

<script>
  export default {
    data() {
      return {
        tableData: [{
          id: '12987122',
          name: '王小虎',
          amount1: '234',
          amount2: '3.2',
          amount3: 10
        }, {
          id: '12987123',
          name: '王小虎',
          amount1: '165',
          amount2: '4.43',
          amount3: 12
        }, {
          id: '12987124',
          name: '王小虎',
          amount1: '324',
          amount2: '1.9',
          amount3: 9
        }, {
          id: '12987125',
          name: '王小虎',
          amount1: '621',
          amount2: '2.2',
          amount3: 17
        }, {
          id: '12987126',
          name: '王小虎',
          amount1: '539',
          amount2: '4.1',
          amount3: 15
        }]
      };
    },
    methods: {
      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;
      }
    }
  };
</script>

后端合计数据+前端合计行样式(需要后端将id字段最后一个id换成合计)
若在此基础上需要将合计的单元格与相邻的空值单元格进行合并，可进行深度监听+样式修改，见下一篇合并单元格

<script>
  export default {
    data() {
      return {
      tableData:[]//获取后端接口返回数据
       }
    },
    methods: {
      getSummaries(param) {
        const { columns, data } = param;
        const sums = [];
        columns.forEach((column, index) => {
          if (index === 0) {
            sums[index] = '合计';
            return;
          }
         data.forEach((item,i)=>{
			if(item.id=='合计'){
				sums['id'] = '';
				if(item.amount1){
					sums['amount1'] = item.amount1;
				}else{
					sums[amount1]= 0//此处看需求要求无值时候展示什么，可为0或‘’
				}
				//若添加单位则如下
				if(item.amount2){
					sums['amount2'] = `${item.amount2}%`;
				}else{
					sums[amount2]= 0//此处看需求要求无值时候展示什么，可为0或‘’
				}
				if(item.amount3){
					sums['amount3'] = `${item.amount3}%`;
				}else{
					sums[amount3]= '-'//此处看需求要求无值时候展示什么，可为0或‘’
				}
			}
		});
		return Object.values(sums)
      }
    }
  };
</script>

引：
Object.values：
返回一个给定对象自身的所有可枚举属性值的数组，值的顺序与使用 for…in 循环的顺序相同。（区别在于 for-in 循环枚举原型链中的属性）
举个栗子：
1：{}的栗子

var obj1 = {name: '光头强', age: '18', height: '177'}
const list1 = Object.values(obj1);
console.log(list1)  // 得到：  ['光头强', '18', '177']

2：【{}】栗子

需要解构赋值，否则会啥也获取不到；
 const arr1obj = [
                        {
                            name: 'jj',
                            age: '3'
                        },
                        {
                            name: '拉拉',
                            age: '130'
                        }
                    ]
                    console.log('[{}{}]=>', Object.values(arr1obj))//空