使用vueantdesign分页以及表格分页改为中文问题
短信预约 -IT技能 免费直播动态提醒
vue ant design分页以及表格分页改为中文
<template>
<div id="app">
<a-config-provider :locale="locale">
<router-view />
</a-config-provider>
</div>
</template>
<script>
import zhCN from 'ant-design-vue/lib/locale-provider/zh_CN'
export default {
data () {
return {
locale: zhCN
}
}
}
</script>
//分页
:pagination="paginationOpt
data(){
paginationOpt: {
showSizeChanger: true,
showQuickJumper: true,
defaultCurrent: 1,
defaultPageSize: 10,
total: 500,
showTotal: total => `共${total}条记录 `
},
}
antDesign for vue组件中文配置
在app.vue文件中引入
import zhCN from 'ant-design-vue/es/locale/zh_CN';
data返回
data(){
return{
locale: zhCN,
}
},
最后需要将组件包裹起来<a-config-provider :locale="locale"></a-config-provider>将组件包裹起来即完成了组件汉化
<a-config-provider :locale="locale">
<router-view></router-view>
</a-config-provider>
刚开始的时候只文档没看全,只关注到js部分的内容,并不看到html部分也需要做配置,导致配置一直没生效,后面查过很多方法都只做了js部分的介绍,并没有对html组件部分进行说明,因此问题一致没有得到解决,后面还按照网上的方法引入了moment,并没有作用,因此总结起来没事多看文档,真的可以避免很多的坑
import moment from 'moment';
import 'moment/locale/zh-cn';
moment.locale('zh-cn');
总结
以上为个人经验,希望能给大家一个参考,也希望大家多多支持编程网。
免责声明:
① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。
② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341