element-plus 分页器 pagination 显示英文问题

### Element Plus 分页器使用教程 #### 安装与引入 为了在 Vue 项目中使用 `Element Plus` 的分页组件 (`el-pagination`)，首先需要通过 npm 进行安装： ```bash npm install element-plus ``` 接着，在项目的入口文件 `main.js` 中引入整个库及其样式表[^3]。 #### 组件配置 当完成上述准备工作之后，可以在 `.vue` 文件内按照需求定义并应用该分页控件。下面是一个简单的例子来展示如何设置一个具有基本功能的分页栏[^4]。 ```html <template> <div class="pagination-container"> <!-- el-pagination 组件 --> <el-pagination :current-page.sync="currentPage" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper" :total="totalItems" @size-change="handleSizeChange" @current-change="handleCurrentChange" > </el-pagination> </div> </template> <script> export default { data() { return { currentPage: 1, pageSize: 10, totalItems: 100 }; }, methods: { handleSizeChange(val) { console.log(`每页 ${val} 条`); }, handleCurrentChange(val) { console.log(`当前页: ${val}`); } } }; </script> ``` 此模板创建了一个包含总数、页面大小切换按钮、上一页/下一页链接以及跳转输入框在内的完整分页导航条。用户可以通过调整这些参数来自定义外观和行为。 #### 属性解释 - **`:current-page.sync`**: 双向绑定到父级作用域的数据项，表示当前选中的页码。 - **`:page-size`**: 设置每页显示的最大记录数量。 - **`layout`**: 控制分页区域内的元素排列方式；这里列举了一些常见的选项组合。 - **`:total`**: 数据总量，用于计算总的页数。 - **事件监听**：如改变页面尺寸或翻页时触发相应的回调函数处理逻辑变化。