antdesignVue表格分页_show-quick-jumper-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_38687592/article/details/130432012

该段代码展示了如何在Vue.js应用中使用A-Table组件进行数据展示，并结合A-Pagination组件实现分页功能。通过设置不同的属性如`dataSource`、`pagination`和事件处理函数如`handleTableChange`、`onShowSizeChange`，实现了动态加载数据和自定义分页样式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<a-table :columns="columns"
:data-source="dataList"
:pagination="false"
:loading="isLoading"
bordered >
</a-table>

<a-pagination v-model="pagination.current"
show-quick-jumper
:page-size-options="pagination.pageSizeOptions"
:defaultCurrent="pagination.defaultCurrent"
:hideOnSinglePage="true"
:itemRender="pagination.itemRender"
:total="pagination.total"
:show-total="(total, range) => `${pagination.getTotal(total, range)}`"
show-size-changer
:page-size="pagination.pageSize"
@change="handleTableChange"
@showSizeChange="onShowSizeChange">
<template slot="buildOptionText" slot-scope="props">
<span v-if="props.value === pagination.total">{{props.value }}全部</span>
<span v-else>{{props.value }}条/页</span>
</template>
</a-pagination>

data(){

        return{

                 pagination: {
                zidingyi:'fenye',
                  pageSize:10,
          defaultCurrent:1,
          current: 1, // 当前页数
        total: 1, // 总数，必须先有
          totalPage:1,
          showSizeChanger: true,
          showQuickJumper: true,
          pageSizeOptions: ["5", "10", "15", "20"],
          itemRender:(current, type, originalElement)=>{
          if (type === 'prev') {
          return <a>上一页</a>;
          } else if (type === 'next') {
          if(this.pagination.current === this.pagination.totalPage){
          return <a>结尾</a>;
          }else{
          return <a>下一页</a>;
          }
          }
          return originalElement;
          },
          getTotal:(total, range)=>{
          console.log(total, range,this.pagination.current,this.pagination.defaultCurrent)
          let sP= ((this.pagination.current - 1)*this.pagination.pageSize) + 1;
          let totalP=this.pagination.total/this.pagination.pageSize;
          let endP=this.pagination.current * this.pagination.pageSize;
          if(totalP<=this.pagination.current){
          endP=this.pagination.total;
          }
          return ` ${sP}-${endP} 共 ${total} 条`
        }
          }

        }

}