vue3 el-pagination 将组件中英文‘goto’ 修改 为 中文到‘第几’

 更新时间:2024年02月26日 09:55:59   作者:PXY_J  
这篇文章主要介绍了vue3 el-pagination 将组件中英文‘goto’ 修改 为 中文到‘第几’,通过实例代码介绍了vue3项目之Pagination 组件,感兴趣的朋友跟随小编一起看看吧

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在App.vue文件中监听路由变化刷新页面操作

    vue在App.vue文件中监听路由变化刷新页面操作

    这篇文章主要介绍了vue在App.vue文件中监听路由变化刷新页面操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-08-08
  • 对vue中v-if的常见使用方法详解

    对vue中v-if的常见使用方法详解

    今天小编就为大家分享一篇对vue中v-if的常见使用方法详解,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-09-09
  • 解决vue-element-admin安装依赖npm install报错问题

    解决vue-element-admin安装依赖npm install报错问题

    这篇文章主要介绍了解决vue-element-admin安装依赖npm install报错问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-06-06
  • vue element input如何让浏览器不保存密码

    vue element input如何让浏览器不保存密码

    这篇文章主要介绍了vue element input如何让浏览器不保存密码问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-03-03
  • Swiper在Vue2中的简单使用方法

    Swiper在Vue2中的简单使用方法

    这篇文章主要给大家介绍了关于Swiper在Vue2中的简单使用方法,swiper是一款现代化的移动端轮播组件,可以在Vue中轻松使用,文中通过代码示例介绍的非常详细,需要的朋友可以参考下
    2023-11-11
  • Vue中keep-alive的两种应用方式

    Vue中keep-alive的两种应用方式

    这篇文章主要介绍了Vue中keep-alive的两种应用方式,文中讲解非常细致,代码帮助大家更好的理解和学习,感兴趣的朋友可以了解下
    2020-07-07
  • vue项目首次打开时加载速度很慢的优化过程

    vue项目首次打开时加载速度很慢的优化过程

    这篇文章主要介绍了vue项目首次打开时加载速度很慢的优化过程,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-08-08
  • vue实现zip文件下载

    vue实现zip文件下载

    这篇文章主要为大家详细介绍了vue实现zip文件下载,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-08-08
  • 解决element DateTimePicker+vue弹出框只显示小时

    解决element DateTimePicker+vue弹出框只显示小时

    这篇文章主要介绍了解决element DateTimePicker+vue弹出框只显示小时,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2021-03-03
  • vue中h5端打开app(判断是安卓还是苹果)

    vue中h5端打开app(判断是安卓还是苹果)

    这篇文章主要介绍了vue中h5端打开app(判断是安卓还是苹果),文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2021-02-02

最新评论