最近在使用ant design vue框架的table组件进行数据展示时,有个序号倒序排序的需求,下面是实现的效果图;
- 倒序主要代码:在Column中加入以下代码,
ipagination.total:列表数据总条数
ipagination.current:当前页
ipagination.pageSize:每页条数(我这是50条)
customRender: function (t, r, index) {
return ipagination.total - (((ipagination.current - 1) * ipagination.pageSize) + Number(index))
},
- 每页序号递增主要代码:在Column中加入以下代码,
ipagination.total:列表数据总条数
customRender: function (t, r, index) {
return parseInt(ipagination.total) - parseInt(index)
},
以下是详细代码:
<template>
<a-table
ref="table"
size="middle"
:scroll="{ x: 1620, y: 470 }"
bordered
rowKey="id"
:columns="columns"
:dataSource="dataSource"
class="j-table-force-nowrap ant-table"
:loading="loading"
:pagination="ipagination"
@change="handleChange1"
></a-table>
</template>
<script>
export default {
data() {
return {
//分页数据
ipagination:{
current: 1, //当前页
pageSize: 50, //每页数量
pageSizeOptions: ['50'],
//分页右下角总条数那的数据
showTotal: (total, range) => {
// return range[0] + "-" + range[1] + " 共" + total + "条" //序号递增时的显示
//序号倒序
let currSize = this.ipagination.total - ((this.ipagination.current - 1)*this.ipagination.pageSize);
return currSize + '-' + (currSize > 50 ? currSize - 49 : 1) +" 共" + total + "条"
},
showQuickJumper: true,
showSizeChanger: true,
total: 0 //总数
},
}
},
created() {
this.loadData(1);
},
computed: {
columns() {
let {
ipagination } = this;
{
fixed: 'left',
title: '序号',
dataIndex: '',
key: 'rowIndex',
width: 50,
align: 'center',
customRender: function (t, r, index) {
// return parseInt(ipagination.total) - parseInt(index) //序号递增
//序号倒序
return ipagination.total - (((ipagination.current - 1) * ipagination.pageSize) + Number(index))
},
},
}
},
methods: {
//改变页数
handleChange1(pagination, filters, sorter) {
this.ipagination = pagination;
this.loadData();
},
//获取接口数据
loadData(arg) {
//加载数据 若传入参数1则加载第一页的内容
if (arg === 1) {
this.ipagination.current = 1;
}
this.loading = true;
getAction('/list', '').then((res) => {
if (res) {
this.dataSource = res.result.records
if(res.result.searchCount)
{
this.ipagination.total = res.result.total
}else{
this.ipagination.total = 0;
}
}
}else{
this.$message.warning("查询失败")
}
}).finally(() => {
this.loading = false
})
},
}
}
</script>