思路:从后端获取数据后,前端计算生成合计行push到表格数据源中。
但是!!! 这样会遇到问题:a-table返回数据大于pagination.pageSize数据不显示问题,这个是vue2、vue3都有的问题。
通俗点说,就是设定pageSize为10,后台也返回10条,但是通过push合计行变成了11条,这样会导致合计行不显示。
解决思路:请求数据之后设置pageSize+1,然后a-table的:pagination="false",引用自定义的分页组件
先上效果图!!!
第一步:设置a-table的:pagination="false"
第二步:引入自定义分页组件
import Pagination from '@/components/jeecgbiz/Pagination' //引入 Pagination组件
components: {
Pagination,
},
第三步:形成合计行数据
全部源码如下:
<template>
<a-card :bordered="false">
<!-- table区域-begin -->
<div>
<div class="ant-alert ant-alert-info" style="margin-bottom: 16px">
<i class="anticon anticon-info-circle ant-alert-icon"></i> 已选择
<a style="font-weight: 600">{{ selectedRowKeys.length }}</a
>项
<a style="margin-left: 24px" @click="onClearSelected">清空</a>
</div>
<a-table
ref="table"
size="middle"
:scroll="{ x: true }"
bordered
rowKey="id"
:columns="columns"
:dataSource="dataSource"
:pagination="false"
:loading="loading"
:rowSelection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }"
class="j-table-force-nowrap"
@change="handleTableChange"
>
<span slot="action" slot-scope="text, record">
<span v-if="record.rowIndex == '合计'"></span>
<span v-else>
<a @click="handleDetail(record)">详情</a>
</span>
</span>
</a-table>
<!-- 页面使用分页组件 -->
<Pagination
v-model="ipagination.current"
:total="ipagination.total"
show-size-changer
:page-size="ipagination.pageSize"
@onShowSizeChange="onShowSizeChange"
:pageSizeOptions="ipagination.pageSizeOptions"
></Pagination>
</div>
</a-card>
</template>
<script>
import '@/assets/less/TableExpand.less'
import { mixinDevice } from '@/utils/mixin'
import { getAction } from '@/api/manage'
import Pagination from '@/components/jeecgbiz/Pagination' //引入 Pagination组件
export default {
name: 'template',
mixins: [mixinDevice],
components: {
Pagination,
},
data() {
return {
description: '管理页面',
// 表头
columns: [
{
title: '#',
dataIndex: 'rowIndex',
// key: 'rowIndex',
width: 60,
align: 'center',
customRender: function (text, r, index) {
return text !== '合计' ? parseInt(index) + 1 : text
},
},
{
title: '月份',
align: 'center',
dataIndex: 'month',
customRender: function (text) {
return !text ? '' : text.length > 10 ? text.substr(0, 10) : text
},
},
{
title: '编号',
align: 'center',
dataIndex: 'recordNo',
customRender: (t) => ellipsis(t),
},
{
title: '金额(不含税)',
align: 'center',
dataIndex: 'amount',
},
{
title: '合同编号',
align: 'center',
dataIndex: 'contractSerialNumber',
customRender: (t) => ellipsis(t),
},
{
title: '合同标题',
align: 'center',
dataIndex: 'contractTitle',
customRender: (t) => ellipsis(t),
},
{
title: '操作',
dataIndex: 'action',
align: 'center',
fixed: 'right',
width: 147,
scopedSlots: { customRender: 'action' },
},
],
url: {
list: '/fm/costInvoice/list'
},
/* 分页参数 */
ipagination: {
current: 1,
pageSize: 10,
pageSizeOptions: ['10', '20', '50', '100', '500'],
showQuickJumper: true,
showSizeChanger: true,
total: 0,
},
dictOptions: {},
newArr: [],
newDataSource: [],
initDateSource: [],
initPageSize: 10,
}
},
created() {
//初始化每页条数
this.initPageSize = this.ipagination.pageSize
this.loadData()
},
methods: {
loadData(arg) {
if (!this.url.list) {
this.$message.error('请设置url.list属性!')
return
}
//加载数据 若传入参数1则加载第一页的内容
if (arg === 1) {
this.ipagination.current = 1
}
//设置请求的条数为初始值
this.ipagination.pageSize = this.initPageSize
var params = this.getQueryParams() //查询条件
this.loading = true
getAction(this.url.list, params).then((res) => {
if (res.success) {
this.initDateSource = res.result.records || res.result
this.newDataSource = res.result.records || res.result
this.dataHandling()
if (res.result.total) {
this.ipagination.total = res.result.total
} else {
this.ipagination.total = 0
}
}
if (res.code === 510) {
this.$message.warning(res.message)
}
this.loading = false
})
},
/*如果分页走这个方法*/
dataHandling() {
//动态新增每页条数
this.ipagination.pageSize = this.initPageSize + 1
this.newArr = []
var arrs = this.newDataSource
if (arrs.length > 0) {
let item = {}
item.rowIndex = '合计'
var amount = 0
for (let i = 0; i < arrs.length; i++) {
amount += arrs[i].amount
}
item.amount = amount
this.newDataSource.push(item)
}
this.dataSource = Object.values(this.newDataSource)
},
// 分页改变时调用组件里的方法
onShowSizeChange(current, pageSize) {
this.ipagination.current = current
this.ipagination.pageSize = pageSize
//调整每页请求数值
this.initPageSize = this.ipagination.pageSize
this.loadData()
},
},
}
</script>
<style scoped>
@import '~@assets/less/common.less';
</style>
自定义分页Pagination.vue
<template>
<a-pagination
v-model="current"
:page-size-options="pageSizeOptions"
:total="total"
show-size-changer
:page-size="pageSize"
@showSizeChange="onShowSizeChange"
:show-total="(total, range) => `${range[0]}-${range[1]} 共 ${total} 条`"
>
</a-pagination>
</template>
<script>
export default {
props: {
total: {
type: Number,
default: 0,
},
pageSizeOptions: {
type: Array,
default() {
return ['10', '20', '30', '50', '100']
},
},
},
data() {
return {
pageSize: 10,
current: 1,
}
},
mounted() {},
methods: {
onShowSizeChange(current, pageSize) {
this.pageSize = pageSize
this.current = current
this.$emit('onShowSizeChange', current, pageSize)
},
},
watch: {
current(val) {
this.$emit('onShowSizeChange', val, this.pageSize)
},
},
}
</script>
<style scoped>
.ant-pagination {
text-align: right !important;
margin-top: 20px !important;
}
</style>