ant分頁使用表格的分頁

<div style="display:flex;align-items: center">
  <div>
    <a-pagination v-model:current="current" :total="total" show-quick-jumper :show-size-changer="false" @change="pageChanges">
      <template #itemRender="{ type, originalElement }">
        <a v-if="type === 'prev'">上一页</a>
        <a v-else-if="type === 'next'">下一页</a>
        <component :is="originalElement" v-else></component>
      </template>
    </a-pagination>
  </div>
  <div style="margin-left: 20px;"> 共{{total}}条记录 第{{ current }}/{{ total/10 }}页</div>
</div>
    const pageChange = (type:any) => {
    if(type){
      page.current = type;
    }

    };
const pageChanges=(page:any,pageSize:any)=>{

  pageChange(page)
}
//獲取數據
total.value=data.value.length
  console.log(data.value.length)
const total=ref()

return

pageChanges,
total,
current: ref(1),

### 使用 Ant Design Vue 实现表格分页与 API 数据交互 在实际开发过程中,为了提高用户体验并优化性能,通常会采用分页的方式展示大量数据。Ant Design Vue 提供了方便易用的 `Table` 和 `Pagination` 组件来帮助开发者快速实现此需求。 #### 创建基础环境 首先,在项目中安装必要的依赖包: ```bash npm install ant-design-vue axios --save ``` 接着引入所需样式文件以及组件库到项目的入口文件(如 main.js 或 app.js): ```javascript import { createApp } from 'vue'; import App from './App.vue'; import Antd from 'ant-design-vue'; import 'ant-design-vue/dist/antd.css'; const app = createApp(App); app.use(Antd).mount('#app'); ``` #### 编写页面逻辑 定义一个简单的 Vue 单文件组件用于显示带分页的数据列表: ```html <template> <a-table :columns="columns" :data-source="dataSource" :pagination="paginationConfig"> <!-- 自定义分页器 --> <template #footer> <a-pagination v-model:current="currentPage" :total="totalCount" @change="handlePageChange"/> </template> </a-table> </template> <script setup lang="ts"> import { ref, onMounted } from 'vue'; import axios from 'axios'; // 定义列结构 const columns = [ { title: 'ID', dataIndex: 'id' }, { title: 'Name', dataIndex: 'name' } ]; let currentPage = ref(1); // 当前页码 let totalCount = ref(0); // 总记录数 let dataSource = ref([] as any[]); // 配置分页参数 const paginationConfig = { pageSize: 10, showSizeChanger: false, }; async function fetchData(pageNum: number) { try { const response = await axios.get(`/api/data?page=${pageNum}&size=10`); // 更新本地状态 dataSource.value = response.data.items; totalCount.value = response.data.totalCount; } catch (error) { console.error('Failed to fetch data:', error); } } function handlePageChange(newPageNumber: number) { currentPage.value = newPageNumber; fetchData(currentPage.value); } onMounted(() => { fetchData(currentPage.value); }); </script> ``` 上述代码片段实现了基本的功能:当用户点击不同页码时触发 `handlePageChange()` 方法,并调用服务器端接口获取对应页次的数据;同时也会自动调整底部分页栏的状态[^2]。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值