Ant Design Vue + js 表格计算合计

1.需要计算的数量固定（如表1，已知需要计算的金额为：装修履约保证金 + 装修垃圾清运费+出入证工本费 + 出入证押金这四项相加，可以写成固定的算法）：

表格样式：

   <h4 style="margin: 0 0 8px 0;font-weight: 600">收费信息</h4><ele-pro-tableborderedref="tableRef"row-key="releaseId":columns="columns":datasource="datasource":scroll="{ x: 900 }":toolkit="[]"   :key =" form.decorationManageId  "   ></ele-pro-table><a-row :gutter="8" style="padding:10px;border-bottom:1px solid #e8e8e8"><a-col :xl="8" :lg="12" :md="12" :sm="24" :xs="24" ><span >合计金额(元)：<span style="color:red">{{form.tableLast}}</span></span></a-col> </a-row>

js部分：

  // 表格1列配置const columns = ref([{title: '序号',key: 'index',width: 80,align: 'center',fixed: 'left',hideInSetting: true,customRender: ({ index }) => index + (tableRef.value?.tableIndex ?? 0)},{title: '项目',dataIndex: 'decorationItemName'},{title: '单价',dataIndex: 'unitPrice'},{title: '数量',dataIndex: 'amount'},{title: '金额(元)',dataIndex: 'paymentAmount'}]);// 表格数据源const datasource =async ({ page, limit, where, orders }) => {  const result = await pageItem({decorationManageId: form.decorationManageId});if (result.length > 0) {form.tableLast  = result[0].paymentAmount +  result[1].paymentAmount + result[2].paymentAmount+ result[3].paymentAmount return result; } else {return [];}};

2.需要计算的数量不固定（如表2 支付可能分几次支付，数据是根据后台信息来的，就需要循环计算！）:

样式：

  <h4 style="margin: 10px 0 8px 0;font-weight: 600">支付信息</h4><ele-pro-tableborderedref="tableRef1"row-key="releaseId1":columns="columns1":datasource="datasource1":scroll="{ x: 900 }":toolkit="[]"     :key =" form.decorationManageId "         >           </ele-pro-table><a-row :gutter="8" style="padding:10px;border-bottom:1px solid #e8e8e8"><a-col :xl="8" :lg="12" :md="12" :sm="24" :xs="24" ><span >已支付金额(元)：<span style="color:red">{{form.tableLast1}}</span><span style="margin-left:40px">剩余应支付金额(元)：<span style="color:red">{{form.tableLast2}}</span></span></span></a-col> </a-row>

js部分：

  // 表格数据源const datasource1 =async ({ page, limit, where, orders }) => {  const result = await pageDetail({decorationManageId: form.decorationManageId});if (result.length > 0) {form.tableLast1 = 0form.tableLast2 = 0result.forEach((item) => {if (item.paymentType == 0) {item. paymentType  = '现金';} else if (item.paymentType == 1) {item.paymentType = '云闪付(储蓄卡)';} else if (item.paymentType == 2) {item.paymentType = '微信';} else if (item.paymentType == 3) {item.paymentType = '支付宝';}  else if (item.paymentType == 4) {item.paymentType = '微信小程序';}  else if (item.paymentType == 5) {item.paymentType = '云闪付(信用卡)';} if (item.paymentStatus == 0) {item.paymentStatus = '未支付';          } else if (item.paymentStatus == 1) {item.paymentStatus = '支付中';} else if (item.paymentStatus == 2) {item.paymentStatus = '支付完成';} if( item.paymentStatus == '支付完成' || item.paymentStatus == 2){       form.tableLast1  += item.paymentAmount *1;        console.log( item.paymentAmount +1,' item.paymentAmount');}else {form.tableLast2 += item.paymentAmount}});return result; } else {return [];}};