Pagination 分页如何使用

el-pagination 是 Element UI 的一个分页组件,可以用于 Vue.js 项目中。

以下是一个简单的示例,展示了如何使用 el-pagination 分页:

  1. 在组件中引入 el-pagination 组件:

  1. 在组件的 data 中定义分页的相关参数:
export default {
  data() {
    return {
      currentPage: 1, // 当前页码
      pageSize: 10, // 每页条数
      total: 100, // 总条数
    };
  },
  methods: {
    handlePageChange(currentPage) {
      // 处理页码变化的方法
    },
  },
};

  1. 在 handlePageChange 方法中处理页码变化事件,例如可以调用接口获取对应页码的数据:
handlePageChange(currentPage) {
  this.currentPage = currentPage;
  fetchData(this.currentPage, this.pageSize).then((res) => {
    // 更新数据列表
  });
},

其中,fetchData 方法为自定义的获取数据的方法,currentPage 和 pageSize 是 el-pagination 组件传入的参数。

以上是一个简单的 el-pagination 分页示例,你可以根据实际需要自行调整相应的参数和处理方式。

你可能感兴趣的:(vue.js,前端,开发语言)