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 use locale with ConfigProvider 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 表格和国际化的使用