验证码： 看不清楚，换一张 查询 注册会员，免验证
  • {{ basic.site_slogan }}

  • 打开微信扫一扫，
    您还可以在这里找到我们哟

    关注我们

{{ basic.service_hotline }}

{{ basic.service_time?basic.service_time:'8:30-17:00（工作日）' }}
首页 全部资讯 Ant Design Vue Pagination分页组件怎么封装与使用

Ant Design Vue Pagination分页组件怎么封装与使用

阅读：808 来源：乙速云 作者：代码code

Ant Design Vue Pagination分页组件怎么封装与使用

Ant Design Vue Pagination分页组件的封装与使用

今天封装一个常用的组件 Pagination 分页

Ant Design Vue Pagination分页组件怎么封装与使用

因为是 Ant Design Vue 的组件，所以必须安装Ant Design Vue才能使用哦～

使用组件：

$ npm i --save ant-design-vue

第一步：首先创建一个组件文件Pagination.vue ，完整代码：


    
  
  .mz-antd-pagination{     .ant-pagination {       text-align: right !important;       margin-top: 20px !important;     }   }

第二步：使用方法

设置ant design vue中的 pagination的最大分页数

Ant Design Vue 中的 pagination 组件有一个 pageSize 属性，用于设置每页显示的数据条数。

同时，还有一个 total 属性，用于设置数据总条数。通过计算可以算出分页数，从而实现设置最大分页数的目的。

代码示例：