ant design vue 组件中文化(转载)
国际化
比如在 ant design vue
分页选择组件中有英文,那怎么改成中文格式呢?
这就需要使用国际化了
https://www.antdv.com/components/locale-provider-cn/
国际化分两种
局部国际化
例:
在要国际化的组件外面包裹
<a-locale-provider :locale="zhCN">
<!--表格-->
<!--
:columns="columns" 表头数据
:data-source="data" 表格数据
rowKey="id" id为 data 中的一个属性
:loading="loading" 表格是否load
:pagination="pagination" 分页参数
-->
<a-table :columns="columns" :data-source="data" rowKey="id" :loading="loading" :pagination="pagination" >
<span slot="status" slot-scope="text, record, index">
<div v-if="text == 1">
<a-button type="primary" @click="changeActive(text, record, index)">已启用</a-button>
</div>
<div v-else>
<a-button type="danger" @click="changeActive(text, record, index)">已禁用</a-button>
</div>
</span>
<!--插槽一定要在表格组件标签中-->
<!--定义插槽渲染-->
<!--
slot="action" 表示是在columns(某列)中的表头值为action中插入标签,往这个位置插入插槽span中间的内容
slot-scope="text, record, index"
text 表示当前行当前列的值
record 表示当前行的数据
index 表格索引
-->
<span slot="action" slot-scope="text, record, index">
<a-button type="primary" @click="edit(text, record, index)">编辑</a-button>
<a-button type="danger">删除</a-button>
</span>
</a-table>
</a-locale-provider>
script中引入并导出
import zhCN from 'ant-design-vue/es/locale-provider/zh_CN';
data() {
return {
zhCN,
}
}
效果
全局国际化
找到 app.vue
,使用包裹根路由出口,引入国际化模块并导出
例:
<template>
<div id="app">
<!--<div id="nav">
<router-link to="/">Home</router-link> |
<router-link to="/about">About</router-link>
</div>-->
<a-locale-provider :locale="zhCN">
<router-view/>
</a-locale-provider>
</div>
</template>
<script>
import zhCN from 'ant-design-vue/es/locale-provider/zh_CN';
export default {
data(){
return {
zhCN,
}
}
}
</script>
关于LocaleProvider弃用
用locale-provider组件的控制台你会发现,有个警告
Warning: [antdv: LocaleProvider]
LocaleProvider
is deprecated. Please uselocale
withConfigProvider
instead
大概意思就是
警告:[antdv: LocaleProvider] ' LocaleProvider '已被弃用。请使用“locale”和“ConfigProvider”
这是因为LocaleProvider是1.x的国际化的实现,2.0版本已经提供了更好的方式,但是1.0的也是可以使用的
2.0全局国际化
https://2x.antdv.com/docs/vue/i18n-cn/
找到 app.vue
,使用包裹根路由出口,引入国际化模块并导出
例:
<template>
<div id="app">
<!--<div id="nav">
<router-link to="/">Home</router-link> |
<router-link to="/about">About</router-link>
</div>-->
<a-config-provider :locale="locale">
<router-view/>
</a-config-provider>
</div>
</template>
<script>
import zhCN from 'ant-design-vue/es/locale/zh_CN';
export default {
data(){
return {
locale:zhCN,
}
}
}
</script>
效果
可以看到已经没有任何警告了
最后
十分感谢原博主,原博客的地址为:
ant design vue 表格和国际化的使用