antdesign-vue3 List的分页器最全配置 【实现上下双分页】

Ant Design Vue 官网： https://www.antdv.com/components/list-cn

何时使用 #

最基础的列表展示，可承载文字、列表、图片、段落，常用于后台数据展示页面。

<div class="s-table-tool">
            <div class="s-table-tool-left"></div>
            <div class="layout-items-center s-table-tool-right">
            <a-space>
            <a-button type="primary" @click="formRef.onOpen()" v-if="hasPerm('proProjectFollowAdd')">
                <template #icon><plus-outlined /></template>
                新增
            </a-button>
            </a-space>
        </div></div>

 

  <a-list size="large" 
    bordered
    :data-source="listData"
    :pagination="pagination"
  >
    <template #renderItem="{ item }">
      <a-list-item>

        <template #actions>

          <a key="list-loadmore-edit" @click="formRef.onOpen(item)" v-if="hasPerm('proProjectFollowEdit')">编辑</a>

          <a-popconfirm title="确定要删除吗？" @confirm="deleteProProjectFollow(item)">

            <a-button type="link" danger size="small" v-if="hasPerm('proProjectFollowDelete')">删除</a-button>

          </a-popconfirm>

        </template>

          <a-list-item-meta
            description="Ant Design, a design language for background applications, is refined by Ant UED Team"
          >
            <template #title>
              <a href="https://www.antdv.com/">{{ item.propName }}</a>
            </template>
            <template #avatar>
              <a-avatar :src="item.fileResult.downloadPath" />
            </template>
          </a-list-item-meta>
          <div>content</div>
      </a-list-item>
    </template>

    <div class="ant-list-pagination">
    <a-pagination v-model:current="pagination.current"
      v-model:page-size="pagination.pageSize"
      :total="pagination.total"
      :showSizeChanger="true"
      :showQuickJumper="true"
      :hideOnSinglePage="false"
      :pageSizeOptions="['1', '10', '20', '40', '80', '100']"
      :show-total="(total, range) => `${range[0]}-${range[1]} 共 ${total} 条`" /> 
    </div>
  </a-list>

 

 

脚本：

<script setup name="proproject">
    const listData = ref([])

const pagination = ref({

        pageSize: 10,

        current: 1,

        total: 0,

        showTotal:(total, range)=>{

             if(range.length > 0)

              return range[0] + "-" + range[1] + " 共" + total + "条"

             else

             return " 共" + total + "条"

        },

        showSizeChanger: true,//是否显示更改每页条数

        showQuickJumper: true,//是否显示跳至第几页

        pageSizeOptions: ['1', '10', '20', '40', '80', '100'],

        hideOnSinglePage: false, // 只有一页时是否隐藏分页器

        position:'top', //指定分页显示的位置 'top' | 'bottom' | 'both'

        // 设置页面变化时的回调，调用methods中的onChange方法

        onChange: ((e) => {

            pagination.value.current = e

            fetchData(pagination.value.current, pagination.value.pageSize);  

        }),

        // 设置每页显示条数变化时的回调

        onShowSizeChange: (page,pageSize) => {

            pagination.value.current = page

            pagination.value.pageSize = pageSize

            fetchData(pagination.value.current, pagination.value.pageSize);  

        }

    })

 

//调取服务器API
    const fetchData = async (page, pageSize) => {
        try {
            const searchFormParam = JSON.parse(JSON.stringify(searchFormState))
            const result = await proProjectApi.proProjectPage(searchFormParam);
            //console.log(result.records)

            listData.value = result.records;
            pagination.value.total = result.total || 0;
        } catch (error) {
            // 处理错误
        } finally {
            //isLoading.value = false;
        }
    };
 
    onMounted(() => {
       fetchData(pagination.value.current, pagination.value.pageSize);
    });
    
</script>