Ant Design Vue中如何给Table添加合计行
直接上代码1.设置Columns如果是第一行就展示总计,其他的情况展示索引代码如下(示例):[{title: '序号',dataIndex: 'index',customRender: ({ index }) => {if (index) {return index} else {return '总计'}}}]2
·
直接上代码
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实现,但是感觉效果没有这样实现的完美。
如果有更好的实现方式,欢迎交流
更多推荐
已为社区贡献1条内容
所有评论(0)