element-plus中自定义el-pagination中的文字

element-plus中自定义el-pagination中的文字

需求

在实习项目中有需求需要自定义分页器中文字,查看element-plus官网没有查到对应的属性,所以记录一下如何修改。

直接看效果图

(官网初始版)
初始效果
(修改后)

修改后

方法

直接看代码先

  <el-config-provider :locale="$commonLang('customPagination')">
            <el-pagination
              :page-sizes="[10, 20, 50, 100]"
              v-model:currentPage="paginationObj.curPage"
              v-model:page-size="paginationObj.pageSize"
              :disabled="false"
              :background="true"
              :layout="'total, sizes, ->, prev, pager, next, jumper'"
              :total="paginationObj.totalLen"
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
            />
  </el-config-provider>

官网解释:el-config-provider 被用来提供全局的配置选项,让你的配置能够在全局都能够被访问到。locale 属性对应翻译文本,因为我要做国际化,所以直接在项目的自己国际化文件写下你想修改的文字(注意:对象键名不能改变

// zh-tw
customPagination: {
      el: {
        pagination: {
          pagesize: '條/頁',
          total: '共 {total} 條',
          goto: '前往',
          pageClassifier: '頁'
        }
      }
    }
// zh-cn
 customPagination: {
      el: {
        pagination: {
          pagesize: '条/页',
          total: '共 {total} 条',
          goto: '前往',
          pageClassifier: '页'
        }
      }
    }
  • 3
    点赞
  • 8
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值