antdesign-vue3 List的分页器最全配置

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

何时使用 #

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

        <a-list size="large" 
    bordered
    :data-source="listData"
    :pagination="pagination"
  >
    <template #renderItem="{ item }">
      
      <a-list-item>
        <template #actions>
          <a key="list-loadmore-edit">edit</a>
          <a key="list-loadmore-more">more</a>
        </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>
  </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:'both', //指定分页显示的位置 'both' | '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>