vue3 el-pagination 将组件中英文‘goto’ 修改 为 中文到‘第几’
vue3 el-pagination 将组件中英文‘goto’ 修改 为 中文到‘第几’
效果如图:
要求:将英文中Go to 改为到第几
操作如下:
<template> <div class="paging"> <el-config-provider :locale="zhCn"> // 注意:这是重要部分 <el-pagination //分页组件根据官网 v-model:current-page="page.currentPage" v-model:page-size="page.pageSize" :background="page.background" :layout="page.layout" :total="page.total" @size-change="page.handleSizeChange" @current-change="page.handleCurrentChange" /> </el-config-provider> </div> </template> <script setup> // 在调用 分页组件el-pagination的页面: import { ElConfigProvider } from 'element-plus' import zhCn from 'element-plus/es/locale/lang/zh-cn'; zhCn.el.pagination.goto = "到第" </script>
补充:
vue3项目之Pagination 组件
Pagination 组件
官方文档:https://element-plus.gitee.io/zh-CN/component/pagination.html
我们把分页器封装成一个公共组件,普通分页器只需要两个参数:
选择一:page-size
每页的数量 + total
总数量
选择二:page-count
总页数 + total
总数量
外加一个回调函数:current-change
当点击分页器时就会触发
Pagination 组件模板
<script setup lang="ts"> import { ElLoading } from 'element-plus' const emits = defineEmits<{ (e: 'pageChange', num: number): void }>() const props = defineProps<{ total: number, pageSize: number }>() // 切换页面回调函数 function currentChange(p: any) { const loading = ElLoading.service({ lock: true, text: 'Loading', background: 'rgba(255, 255, 255, 0.7)', }) // 调用父组件切换页面回调函数 emits('pageChange', p) setTimeout(() => { loading.close() }, 500) } </script> <template> <el-pagination :page-size="pageSize" :total="total" @current-change="currentChange" 显示属性 layout="prev, pager, next" hide-on-single-page next-text="下一页" prev-text="上一页" /> </template> <style scoped> .el-pagination { margin: 30px auto; justify-content: center; } </style>
父组件引用
// 从 vuex 中获取参数(也可以直接在组件中定义) const roomList = computed(() => store.state.roomList) const roomTotal = computed(() => store.state.roomTotal) const roomPageSize = computed(() => store.state.roomPageSize) // home页数改变回调函数 async function roomPageChange(pageNo: any) { const loading = ElLoading.service({ lock: true, text: 'Loading', background: 'rgba(255, 255, 255, 0.7)', }) page.value = pageNo await store.dispatch('getRoomList', { pageNo, cityCode: city.value }) setTimeout(() => { loading.close() }, 500) }
<!-- 分页器 --> <Pagination @pageChange="roomPageChange" :total="roomTotal" :pageSize="roomPageSize" />
发送请求的过程
在 vuex 发送请求获取数据,保存数据列表及数据总数。例如发送一个搜索请求,参数:当前页数、每页数量等等,获取的数据中会包含数据总数,所以总页数会自动计算,只需要确定每页数量和数据总数就行。
到此这篇关于vue3 el-pagination 将组件中英文‘goto’ 修改 为 中文到‘第几’的文章就介绍到这了,更多相关vue3 el-pagination英文改为中文内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!
相关文章
解决vue-element-admin安装依赖npm install报错问题
这篇文章主要介绍了解决vue-element-admin安装依赖npm install报错问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-06-06解决element DateTimePicker+vue弹出框只显示小时
这篇文章主要介绍了解决element DateTimePicker+vue弹出框只显示小时,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧2021-03-03
最新评论