element分页如何使用

Element UI 的分页组件非常方便实用，只需要在页面中引入组件并传入相应的分页参数即可。

引入组件

首先需要在页面中引入分页组件 el-pagination，可以通过以下代码实现：

<template>
   <div>
     <!-- 分页组件的使用，以下为基本使用示例 -->
     <el-pagination
       :current-page="currentPage"
       :page-size="pageSize"
       :total="total"
       @current-change="handleCurrentChange">
     </el-pagination>
   </div>
</template>

<script>
// 引入 Element 组件库
import { Pagination } from 'element-ui';

// 注册组件
export default {
   components: {
     'el-pagination': Pagination,
   },
   data() {
     return {
       currentPage: 1, // 当前页码默认值为1
       pageSize: 10, // 每页显示条数默认值为10
       total: 0, // 数据总数
     }
   },
   methods: {
     // 翻页触发的方法
     handleCurrentChange(currentPage) {
       this.currentPage = currentPage;
       // 根据 this.currentPage 获取对应页面数据
       //...
     }
   }
}
</script>

2.绑定参数

在组件的 data 对象中定义分页所需的三个常用参数：currentPage（当前页码）、pageSize（每页显示的数据条数）和 total（总数据条数）。

data() {
  return {
    currentPage: 1, 
    pageSize: 10, 
    total: 0,
  }
}

currentPage 表示当前页码，默认值为 1， pageSize 表示每页显示多少条数据，可以根据具体情况设置合适的值，默认值为 10， total 表示数据的总条数，需要根据实际数据总数进行绑定。

3.翻页事件

通过绑定 @current-change 事件，来监听用户翻页的动作。事件会触发 handleCurrentChange 方法，参数为当前所点击的页码。在该方法中，你可以编写相应的逻辑，实现分页数据的获取和显示。

例如，以下代码可以通过 Axios 获取当前页数据：

methods: {
  handleCurrentChange(currentPage) {
    this.currentPage = currentPage;
    // 计算 start 和 limit，根据 currentPage 和 pageSize 设置 start 和 level
    const start = (currentPage - 1) * this.pageSize;
    const limit = this.pageSize;
    // 调用 API 获取数据
    axios.get(`/api/data?start=${start}&limit=${limit}`).then(response => {
      this.tableData = response.data;
    })
  }
}

element分页如何使用

猜你喜欢