Ant Design Vue中如何给Table添加合计行

直接上代码

1.设置Columns

如果是第一行就展示总计，其他的情况展示索引
代码如下（示例）：

[
    {
      title: '序号',
      dataIndex: 'index',
      customRender: ({ index }) => {
        if (index) {
          return index
        } else {
          return '总计'
        }
      }
    }
]

---

2.设置分页

因为表格中使用了Pagination分页，限制了Table的每页展示条数，所以需要将分页pageSize设置为11，设置Pagination分页组件的自定义下拉选项
代码如下（示例）：

<a-pagination
    v-model:current="1"
    :page-size-options="['11']"
    :total="total"
    :page-size="11"
    :show-total="(total) => `共 ${total} 条`"
  >
    <template #buildOptionText="props">
      <span v-if="props.value === '11'">10条/页</span>
    </template>
  </a-pagination>

---

3.塞入合计数据

此时调用接口传入后台的 paseSize 为 11 ，需要 -1，将返回的合计数据塞入到表格dataSource的中
代码如下（示例）：

const dataSource = list && list.length > 0 ? [total, ...list] : []

---

总结

还有一种用表格的Footer和Header实现，但是感觉效果没有这样实现的完美。
如果有更好的实现方式，欢迎交流