vue3+element plus,使用分页total修改成中文

vue3+element plus,使用分页total修改成中文

使用element plus的分页功能 el-pagination 的时候,total属性显示是英文

在这里插入图片描述

这是我建的一个新项目,总数显示的Total 1000
我们的需求是显示中文,共 1000 条
这个就很尴尬,组件封装的东西,查了所有api都没有写怎么改
官网上面有个 国际化配置(官网直通车)
在这里插入图片描述
其实按照官网上写的配置,其实并不好使。
那我们应该怎么办呢?一般的是不是都会去看看控制台里面有啥?
细心的人会发现,这个好像就是我们引入的组件吧
在这里插入图片描述
将这个展开,有个el对象,el对象里面会有pagination,里面的goto,total好像在哪里见过?
在这里插入图片描述
和我们的组件很像啊,那要不我们试着改一下看看?
在这里插入图片描述

zhCn.el.pagination = {
      goto: "跳转至",
      pageClassifier: "",
      pagesize: "",
      total: "共 {total} 条",
    };

我们改完之后的效果
在这里插入图片描述
这样我们就改好了,改成中文了,而且可以自定义,想改成啥就改成啥。

根据这个方法,那我们是不是也可以改其他组件的默认值
在这里插入图片描述
这么多,是不是都能改,就这样直接改成全局的,这个是不是也是一种方法?
这个就小伙伴们自己探索吧

如果这个对你有帮助,麻烦点个赞收藏一下吧,嘻嘻。

以下是使用Vue3和Element UI实现分页的示例代码: ```vue <template> <div> <el-pagination :current-page="currentPage" :page-sizes="[10, 20, 30, 40]" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper" :total="total" @current-change="handleCurrentChange" @size-change="handleSizeChange" /> </div> </template> <script> import { ref } from 'vue'; import { ElPagination } from 'element-plus'; export default { components: { ElPagination, }, setup() { const currentPage = ref(1); const pageSize = ref(10); const total = ref(0); function handleCurrentChange(val) { currentPage.value = val; fetchData(); } function handleSizeChange(val) { pageSize.value = val; currentPage.value = 1; fetchData(); } function fetchData() { // 在这里发起请求获取分页数据 // 请求参数包括 currentPage.value 和 pageSize.value // 请求功后更新 total.value 和分页数据 } fetchData(); return { currentPage, pageSize, total, handleCurrentChange, handleSizeChange, }; }, }; ``` 在这个示例中,我们使用Vue3的Composition API来管理组件状态。我们使用了`ref`函数来创建响应式变量,这些变量包括当前页码、每页显示的条目数和条目数。我们还使用Element UI的`ElPagination`组件来渲染分页器,并监听了`current-change`和`size-change`事件来处理页码和每页显示条目数的变化。在`handleCurrentChange`和`handleSizeChange`函数中,我们更新了当前页码和每页显示条目数,并重新发起了请求获取分页数据。在`fetchData`函数中,我们可以发起请求获取分页数据,并更新条目数和分页数据。
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值