arco-design 组件库中用 table 组件，做金额合计 sum

 <a-table :columns="columns" :data="data" :scroll="scroll" :summary="summary">
    <template #summary-cell="{ column,record,rowIndex }">
      <div :style="getColorStyle(column,record)">{{record[column.dataIndex]}}</div>
    </template>
  </a-table>

const summary = ({ columns, data }) => {
    console.log("summary", data);
    let countData = {
        priceAll: 0,
        havaPaid: 0,
        noPaid: 0,
    };
    data.forEach(record => {
        countData.priceAll += record.amount;
        countData.havaPaid += record.havaPaid;
        record.noPaid = record.amount - record.havaPaid;
        console.log("record", record);

        countData.noPaid += record.noPaid;
    });

    return [
        {
            amount: countData.priceAll,
            havaPaid: countData.havaPaid,
            noPaid: countData.noPaid,
            serial: "合计",
        },
    ];
};

arco-design 组件库中用 table 组件，做金额合计 sum

 serial: "合计",  serial是要展示合计的列字段

 amount: countData.priceAll,
 havaPaid: countData.havaPaid,
 noPaid: countData.noPaid,

这三个分别是要显示合计的字段，总金额 已付金额，待付金额 的列字段

效果如下