vue3 el-pagination

### Vue3 中使用 Element Plus 分页组件 (el-pagination) #### 组件引入 为了在项目中使用 `el-pagination`，需先安装并配置好 Element Plus 库。通过 npm 或 yarn 安装 Element Plus 后，在 main.js 文件里全局注册该库。 ```javascript import { createApp } from 'vue' import App from './App.vue' // 导入整个 ElementPlus 或按需加载所需组件 import ElementPlus from 'element-plus' import 'element-plus/lib/theme-chalk/index.css' const app = createApp(App) app.use(ElementPlus) app.mount('#app') ``` #### HTML 结构设置 创建一个简单的表格展示区域以及下方放置分页控件的位置： ```html <template> <div style="margin: 20px;"> <!-- 表格部分 --> <el-table :data="tableData.slice((currentPage-1)*pageSize, currentPage*pageSize)" border stripe> <el-table-column prop="date" label="日期"></el-table-column> <el-table-column prop="name" label="姓名"></el-table-column> <el-table-column prop="address" label="地址"></el-table-column> </el-table> <!-- 分页器 --> <div class="pagination"> <el-pagination background layout="total, prev, pager, next" :current-page.sync="currentPage" :page-size="pageSize" :total="totalCount" @size-change="handleSizeChange" @current-change="handleCurrentChange"/> </div> </div> </template> ``` #### JavaScript 数据处理逻辑 编写脚本控制分页行为，并初始化一些必要的变量来保存当前页码、每页显示记录数量等信息。 ```javascript <script setup> import { ref, computed } from 'vue'; let tableData = [ {"date": "2016-05-03", "name": "王小虎", "address": "上海市普陀区金沙江路 1518 弄"}, // ... 更多模拟数据项 ... ]; const pageSize = ref(10); // 每页大小 const currentPage = ref(1); // 当前页数 const totalCount = computed(() => { return tableData.length; // 总条目数 }); function handleSizeChange(val) { console.log(`每页 ${val} 条`); } function handleCurrentChange(val) { console.log(`当前页: ${val}`); } </script> ``` 上述代码实现了基本的前端分页功能[^1]。这里的关键在于利用 `slice()` 方法动态截取要渲染的数据片段；同时监听用户的交互事件调整页面索引值从而达到翻页效果。