ant design vue table组件表头显示每列数据总和

你可以使用 `customTitle` 属性来自定义表头，然后计算每列数据的总和并在表头中显示。具体步骤如下：

1. 在表格数据源中增加一列用于存放每列数据的总和，例如 `sum`。

2. 在表格的 `columns` 属性中定义每列的渲染方式，其中需要将 `customTitle` 设置为一个函数，该函数返回一个包含表头显示内容和样式的对象。在这个函数中，你可以通过遍历表格数据源中的每一行，计算出每列数据的总和。

3. 在表头中使用 `scoped-slot` 来渲染自定义表头。

下面是一个简单的示例代码：

<template>
  <a-table :columns="columns" :dataSource="dataSource">
    <template slot="title">
      <span>自定义表头</span>
    </template>
  </a-table>
</template>

<script>
export default {
  data() {
    return {
      dataSource: [
        { name: "张三", age: 18, score: 80, sum: 0 },
        { name: "李四", age: 20, score: 90, sum: 0 },
        { name: "王五", age: 22, score: 85, sum: 0 },
      ],
      columns: [
        {
          title: "姓名",
          dataIndex: "name",
          customTitle: () => ({
            text: "姓名",
            style: { fontWeight: "bold" },
          }),
        },
        {
          title: "年龄",
          dataIndex: "age",
          customTitle: () => ({
            text: "年龄",
            style: { fontWeight: "bold" },
          }),
        },
        {
          title: "成绩",
          dataIndex: "score",
          customTitle: (col) => ({
            text: `成绩（总和：${this.getSum(col.dataIndex)})`,
            style: { fontWeight: "bold" },
          }),
        },
      ],
    };
  },
  methods: {
    getSum(dataIndex) {
      let sum = 0;
      this.dataSource.forEach((item) => {
        sum += item[dataIndex];
      });
      return sum;
    },
  },
};
</script>

在这个示例代码中，我们计算出了每列数据的总和，并将其显示在了表头中。你可以根据自己的需求进行修改和调整。