如何在项目中用elementui实现分页器功能

1.在结构部分复制官网代码：

1. <template> 标签:

   • 这是 Vue 模板的根标签，包含所有的 HTML 元素和 Vue 组件。

2. <div> 标签:

   • 这是一个普通的 HTML 元素，包裹了 el-pagination 组件。它没有特别的意义，只是为了确保 el-pagination 组件在模板中有合适的父元素。

3. <el-pagination> 标签:

   • 这是 Element UI 库中的一个组件，用于创建分页器。

   • 以下是对各个属性的解释：

   • background:

     • 这个属性用于给分页器的按钮添加背景色。如果设置为 true，按钮会有背景色。

   • layout="prev, pager, next":

     • layout 属性定义了分页器的布局。这里指定了三个部分：
       • prev: 表示“上一页”按钮。
       • pager: 表示中间的页码选择部分。
       • next: 表示“下一页”按钮。

   • :current-page="pageNo":

     • current-page 绑定了一个名为 pageNo 的变量，表示当前选中的页码。: 是 Vue.js 的绑定语法，表示这是一个动态绑定的值。

   • :total="total":

     • total 绑定了一个名为 total 的变量，表示总的数据条数。分页器会根据这个值自动计算总页数。

   • :page-size="pageSize":

     • page-size 绑定了一个名为 pageSize 的变量，表示每页显示的数据条数。

   • :pager-count="7":

     • pager-count 表示页码选择器中最多显示多少个页码按钮。在这里，最多显示 7 个页码按钮。

   • @current-change="$emit('getPageNo', $event)":

     • 这是一个事件监听器，当用户切换页码时（即 current-change 事件被触发），会执行 $emit('getPageNo', $event)。这里 $emit 是 Vue.js 中用于触发自定义事件的方法。$event 是 Vue.js 提供的一个特殊变量，表示事件触发时传递的参数，即用户选择的页码

2.在需要用到分页器的组件编辑参数：

1. :pageNo="searchParams.pageNo":

   • pageNo 是传递给 Pagination 组件的一个属性，表示当前页码。
   • searchParams.pageNo 是一个对象属性，表示当前搜索参数中的页码。

2. :pageSize="searchParams.pageSize":

   • pageSize 是传递给 Pagination 组件的一个属性，表示每页显示的数据条数。
   • searchParams.pageSize 是一个对象属性，表示当前搜索参数中的每页数据条数。

3. :total="total":

   • total 是传递给 Pagination 组件的一个属性，表示总的数据条数。
   • total 是一个变量，表示总的数据条数。

4. :continues="5":

   • continues 是传递给 Pagination 组件的一个属性，表示分页器中连续显示的页码数量。
   • 5 表示在分页器中会显示连续的 5 个页码按钮。

5. @getPageNo="getPageNo":

   • @getPageNo 是监听 Pagination 组件触发的 getPageNo 事件。
   • getPageNo 是一个方法，表示当 Pagination 组件触发 getPageNo 事件时，会调用 getPageNo 方法来处理事件。

3.在分页器组件接收参数

 4.在需要用到分页器的组件设置初始参数：

5.在需要用到分页器的组件像服务器发请求（实现按钮和页面跳转的绑定）

最后，可以看见效果：

原文地址：https://blog.csdn.net/m0_74461206/article/details/143799903

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！