el-table合计

193 阅读1分钟
show-summary  //自动计算
:summary-method="getSummaries"  //计算方法格式化
<el-table :data="deptItem.relOutTicDetails" row-key="uuid" border show-summary :summary-method="getSummaries">
   <el-table-column label="序号" width="50" type="index" align="left"></el-table-column>
   <el-table-column label="发票代码" min-width="100" align="left" prop="tic_code" :show-overflow-tooltip="true"/>
   <el-table-column label="发票号码" min-width="100" align="left" prop="tic_number" :show-overflow-tooltip="true"/>
   <el-table-column label="发票非税金额(元)" min-width="140" align="left" prop="tic_non_tax_total" :show-overflow-tooltip="true"/>
   <el-table-column label="税率(%)" align="left" min-width="100" prop="tic_tax_rate" :show-overflow-tooltip="true"/>
   <el-table-column label="发票价税总金额(元)" min-width="139" align="left" prop="tic_total" :show-overflow-tooltip="true"/>
   <el-table-column label="预付款平账信息" min-width="100" align="left" prop="is_fl_pre_pay" :show-overflow-tooltip="true"/>
   <el-table-column label="预付款金额(元)" min-width="140" align="left" prop="fl_pre_pay" :show-overflow-tooltip="true"/>
</el-table>

//table的合计方法
getSummaries(param){
   const { columns, data } = param
   const sums = []

   columns.forEach((column, index) => {
      //第一个显示为合计
      if (index === 0) {
         sums[index] = '合计'
         return
      }
      const values = data.map((item) => item[column.property])
      //此处我只需要第四列和第六列进行计算展示
      if (!values.every(value => isNaN(value)) && index===3 || index===5) {
         sums[index] = values.reduce((prev, curr) => {
            const value = Number(curr);
            if (!isNaN(value)) {
               let sumData = this.$numAdd(prev,curr)
               return sumData;
            } else {
               return prev;
            }
         }, 0);
         sums[index] += ' 元';
      } else {
         sums[index] = '';
      }
   });
   return sums
},