Antd+vue table分页序号倒序排序/分页序号递增

最近在使用ant design vue框架的table组件进行数据展示时,有个序号倒序排序的需求,下面是实现的效果图;
在这里插入图片描述在这里插入图片描述

  1. 倒序主要代码:在Column中加入以下代码,
    ipagination.total:列表数据总条数
    ipagination.current:当前页
    ipagination.pageSize:每页条数(我这是50条)
 customRender: function (t, r, index) {
    
    
            return ipagination.total - (((ipagination.current - 1) * ipagination.pageSize) + Number(index))
          },
  1. 每页序号递增主要代码:在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>

猜你喜欢

转载自blog.csdn.net/Hyanl/article/details/127615628