vue3使用element-plus分页插件

1. 安装 element-plus

npm install element-plus --save

2. 在 main.js 中引入 element-plus

import { createApp } from 'vue'
import App from './App.vue'
import ElementPlus from 'element-plus';
import 'element-plus/lib/theme-chalk/index.css';

createApp(App).use(ElementPlus).mount('#app')

3. 在组件中使用 el-pagination 分页插件

<template>
  <div class="pagination-demo">
    <el-pagination
      :current-page="currentPage"
      :page-size="pageSize"
      :total="total"
      @current-change="handleCurrentChange"
      layout="total, sizes, prev, pager, next, jumper"
    >
    </el-pagination>
  </div>
</template>

<script>
export default {
  data() {
    return {
      currentPage: 1, // 当前页数
      pageSize: 10, // 每页显示条数
      total: 100, // 总条数
    };
  },
  methods: {
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      // TODO: 根据当前页数请求数据
    },
  },
};
</script>

<style>
.pagination-demo {
  display: flex;
  justify-content: center;
  margin-top: 20px;
}
</style>

参考文档：[element-plus 分页](https://element-plus.gitee.io/#/zh-CN/component/pagination)