直接上代码

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实现,但是感觉效果没有这样实现的完美。
如果有更好的实现方式,欢迎交流

Logo

前往低代码交流专区

更多推荐