【Element Ui】el-table合计功能与只统计多选框选中行的指定列数据

vue3 + element plus

实现效果：

打开官网，只需要添加 show-summary 属性就能用自带的合计功能

添加 :summary-method="getSummaries"  就可以自定义合计方法

关键代码如下：

    <el-table
        show-summary
        :summary-method="getSummaries"
        :data="reconciliationList"
        @selection-change="handleSelectionChange"
        border
         >
      <el-table-column type="selection" width="55" align="center" fixed="left"/>
      <el-table-column label="对账人" align="center" prop="fname"  />
      <el-table-column label="对账日" align="center" prop="fdateValue" />
      <el-table-column label="数量" align="center" prop="fpriceqty"/>
      <el-table-column label="含税金额" align="center" prop="fallAmount"/>
      <el-table-column label="客户订单号" align="center" prop="fpyzuText" />
    </el-table> 

const selectData = ref([])

function getSummaries(val){
  const { columns, data } = val;
  const sums = [];
  columns.forEach((column, index) => {
    if (index === 0) {
      sums[index] = '合计';
      return;
    }
    let values = []
    if (selectData.value.length===0) {
      values = data.map(item => Number(item[column.property]));
    }else{
      values = selectData.value.map(item => Number(item[column.property]));
    }
    // 对需要统计的列进行判断
    if (column.property === 'fpriceqty' ||column.property ==='fallAmount') {
      sums[index] = values.reduce((prev, curr) => {
        const value = Number(curr);
        if (!isNaN(value)) {
          return prev + curr;
        } else {
          return prev;
        }
      }, 0).toFixed(2);
    }
  });
  return sums
}

function handleSelectionChange(selection) {
  selectData.value = selection.map(item => item)
}