ant design vue table组件表头计算此列数据总和

Ant Design Vue 的 Table 组件提供了 `customRow` 和 `customHeaderRow` 属性，可以自定义每行和表头的渲染。我们可以利用这个特性，在表头最后一列加上一个求和单元格，并在每一行的对应列单元格中填入数据。

具体实现步骤如下：

1. 在表头的最后一列加上一个求和列，代码如下：

<a-table-column title="总计" dataIndex="total" key="total" customHeaderRow={(columns, index) => {
  return {
    on: {},
    props: {
      colSpan: columns.length - 1,
    },
  };
}}>
  <template slot-scope="text">
    {{ text }}
  </template>
</a-table-column>

这里使用了 `customHeaderRow` 属性，将求和列合并到表头的最后一列，并且不设置 `dataIndex` 和 `key` 属性，以避免它被渲染为真实数据的列。

2. 在每一行的对应列单元格中填入数据，并且在最后一列单元格中计算总和，代码如下：

<a-table-column title="数量" dataIndex="quantity" key="quantity" customRow={(record, index) => {
  return {
    on: {},
    props: {},
    children: record.quantity,
    onCell: () => {
      return {
        style: {
          textAlign: 'right',
        },
      };
    },
  };
}} />
<a-table-column title="单价" dataIndex="price" key="price" customRow={(record, index) => {
  return {
    on: {},
    props: {},
    children: record.price,
    onCell: () => {
      return {
        style: {
          textAlign: 'right',
        },
      };
    },
  };
}} />
<a-table-column title="小计" key="subtotal" customRow={(record, index) => {
  const subtotal = record.quantity * record.price;
  if (index === dataSource.length - 1) {
    // 计算总和
    let sum = 0;
    dataSource.forEach((item) => {
      sum += item.quantity * item.price;
    });
    return {
      on: {},
      props: {},
      children: sum.toFixed(2),
      onCell: () => {
        return {
          style: {
            textAlign: 'right',
            fontWeight: 'bold',
          },
        };
      },
    };
  } else {
    return {
      on: {},
      props: {},
      children: subtotal.toFixed(2),
      onCell: () => {
        return {
          style: {
            textAlign: 'right',
          },
        };
      },
    };
  }
}} />

这里使用了 `customRow` 属性，自定义每一行的渲染。在对应列的单元格中填入数据，同时在最后一列单元格中计算总和。

完整的示例代码如下：

<template>
  <a-table :columns="columns" :dataSource="dataSource" bordered />
</template>

<script>
export default {
  data() {
    return {
      columns: [
        {
          title: '名称',
          dataIndex: 'name',
          key: 'name',
        },
        {
          title: '数量',
          dataIndex: 'quantity',
          key: 'quantity',
          customRow: (record, index) => {
            return {
              on: {},
              props: {},
              children: record.quantity,
              onCell: () => {
                return {
                  style: {
                    textAlign: 'right',
                  },
                };
              },
            };
          },
        },
        {
          title: '单价',
          dataIndex: 'price',
          key: 'price',
          customRow: (record, index) => {
            return {
              on: {},
              props: {},
              children: record.price,
              onCell: () => {
                return {
                  style: {
                    textAlign: 'right',
                  },
                };
              },
            };
          },
        },
        {
          title: '小计',
          key: 'subtotal',
          customRow: (record, index) => {
            const subtotal = record.quantity * record.price;
            if (index === this.dataSource.length - 1) {
              // 计算总和
              let sum = 0;
              this.dataSource.forEach((item) => {
                sum += item.quantity * item.price;
              });
              return {
                on: {},
                props: {},
                children: sum.toFixed(2),
                onCell: () => {
                  return {
                    style: {
                      textAlign: 'right',
                      fontWeight: 'bold',
                    },
                  };
                },
              };
            } else {
              return {
                on: {},
                props: {},
                children: subtotal.toFixed(2),
                onCell: () => {
                  return {
                    style: {
                      textAlign: 'right',
                    },
                  };
                },
              };
            }
          },
        },
      ],
      dataSource: [
        {
          name: '商品 1',
          quantity: 2,
          price: 10.5,
        },
        {
          name: '商品 2',
          quantity: 3,
          price: 5.2,
        },
        {
          name: '商品 3',
          quantity: 1,
          price: 6.8,
        },
      ],
    };
  },
};
</script>