ant design vue 表格合计

Ant Design Vue 表格支持在表格底部添加合计行，可以通过 `footer` 属性来设置。下面是一个简单的示例：

<template>
  <a-table :columns="columns" :data-source="dataSource" :footer="footer">
    <template #name="text">
      {{ text }}
    </template>
  </a-table>
</template>

<script>
export default {
  data() {
    return {
      columns: [
        {
          title: '姓名',
          dataIndex: 'name',
          key: 'name'
        },
        {
          title: '年龄',
          dataIndex: 'age',
          key: 'age',
          align: 'right',
          // 定义合计函数
          customRender: (text, record, index) => {
            if (index === this.dataSource.length - 1) {
              return <span>{{ this.sumAge }}</span>;
            }
            return <span>{{ text }}</span>;
          }
        }
      ],
      dataSource: [
        { name: '张三', age: 20 },
        { name: '李四', age: 25 },
        { name: '王五', age: 30 }
      ]
    };
  },
  computed: {
    sumAge() {
      let sum = 0;
      this.dataSource.forEach(item => {
        sum += item.age;
      });
      return sum;
    },
    footer() {
      return () => {
        return (
          <a-table-row>
            <a-table-cell>合计</a-table-cell>
            <a-table-cell align="right">{{ this.sumAge }}</a-table-cell>
          </a-table-row>
        );
      };
    }
  }
};
</script>

在上面的示例中，我们在表格的第二列定义了一个 `customRender` 函数，用于自定义渲染单元格内容。当渲染到最后一行时，我们在单元格中显示所有年龄的总和。

然后，我们通过 `computed` 计算属性定义了一个 `footer` 函数，用于渲染表格的底部。在该函数中，我们返回一个 `a-table-row` 元素，其中包含两个 `a-table-cell` 元素，分别显示“合计”和总年龄。最后，我们将 `footer` 属性设置为该函数即可。