Vue表格添加合计行：实现数据汇总、动态统计与展示

2023-11-16 16:17:56

Ant Design Vue表格合计行的实现

在Ant Design Vue中，我们可以通过自定义表格的footer属性来实现合计行。具体步骤如下：

首先，我们需要在表格的数据源中添加合计行的数据。我们可以使用reduce()方法对数据进行汇总，然后将汇总结果添加到数据源的末尾。
接下来，我们需要在表格的footer属性中指定合计行的渲染函数。在这个渲染函数中，我们可以使用createElement()方法创建合计行的DOM结构，并将其返回。
最后，我们需要在表格的columns属性中指定合计行的列。在每一列的footer属性中，我们需要指定合计行的值。

以下是一个实现合计行的示例代码：

<template>
  <a-table :data="dataSource" :columns="columns" :footer="renderFooter" />
</template>

<script>
import { Table } from 'ant-design-vue';

export default {
  components: {
    ATable: Table,
  },
  data() {
    return {
      dataSource: [
        {
          key: '1',
          name: 'John Brown',
          age: 32,
          address: 'New York No. 1 Lake Park',
        },
        {
          key: '2',
          name: 'Jim Green',
          age: 42,
          address: 'London No. 1 Lake Park',
        },
        {
          key: '3',
          name: 'Joe Black',
          age: 36,
          address: 'Sydney No. 1 Lake Park',
        },
      ],
      columns: [
        {
          title: 'Name',
          dataIndex: 'name',
          key: 'name',
        },
        {
          title: 'Age',
          dataIndex: 'age',
          key: 'age',
        },
        {
          title: 'Address',
          dataIndex: 'address',
          key: 'address',
        },
      ],
    };
  },
  methods: {
    renderFooter() {
      const data = this.dataSource.reduce((prev, curr) => {
        return {
          name: '合计',
          age: prev.age + curr.age,
          address: '合计',
        };
      }, {
        name: '合计',
        age: 0,
        address: '合计',
      });
      return [
        {
          key: 'name',
          children: data.name,
        },
        {
          key: 'age',
          children: data.age,
        },
        {
          key: 'address',
          children: data.address,
        },
      ];
    },
  },
};
</script>