【Vue3+Element Plus+Pinia】el-pagination 修改默认的提示文字

stores/useElLocaleLangSotre

import { ref } from 'vue'
import { defineStore } from 'pinia'

export const useElLocaleLangSotre = defineStore('elLocaleLang', () => {
  const zhCn = {
    // 初始化 pagination 的默认值
    pagination: ref({
      goto: '前往',
      pagesize: '条/页',
      total: '共 {total} 条',
      pageClassifier: '页',
      page: '页',
      prev: '上一页',
      next: '下一页',
      currentPage: '第 {pager} 页',
      prevPages: '向前 {pager} 页',
      nextPages: '向后 {pager} 页',
      deprecationWarning: '你使用了一些已被废弃的用法，请参考 el-pagination 的官方文档'
    })
  }

  return { zhCn }
})

挂载全局

import App from '@/App.vue'

import { createApp } from 'vue'
import { createPinia } from 'pinia'

import ElementPlus from 'element-plus'
import zhCn from 'element-plus/es/locale/lang/zh-cn'

import { useElLocaleLangSotre } from '@/stores/useElLocaleLangSotre'

const app = createApp(App)

app.use(createPinia())

// 可以打印 zhCn.el 查看默认值
zhCn.el.pagination = useElLocaleLangSotre().zhCn.pagination

app.use(ElementPlus, {
  locale: zhCn
})

app.mount('#app')

在对应组件中修改文本

import { useElLocaleLangSotre } from '@/stores/useElLocaleLangSotre'

// 保存修改前的文本
const localeLangZhCnCopy = JSON.parse(JSON.stringify(useElLocaleLangSotre().zhCn.pagination))

// 加载前修改指定文本
onBeforeMount(() => {
    useElLocaleLangSotre().zhCn.pagination.total = '共 {total} 道试题'
    useElLocaleLangSotre().zhCn.pagination.goto = '跳转到第'
    useElLocaleLangSotre().zhCn.pagination.pageClassifier = '题'
})

// 销毁前恢复文本
onBeforeUnmount(() => {
    useElLocaleLangSotre().zhCn.pagination.total = localeLangZhCnCopy.total
    useElLocaleLangSotre().zhCn.pagination.goto = localeLangZhCnCopy.goto
    useElLocaleLangSotre().zhCn.pagination.pageClassifier = localeLangZhCnCopy.pageClassifier
})

效果图