多语言组件文档

1. 组件名称--I18nTable
2. 组件路径--@/components/I18nTable
3. 组件属性

   字段	说明	数据类型	例子	备注
   fields	需要配置的页面元素	Array	[   "字典名称",   "字典类型",   "状态",   "创建时间",   "请输入字典名称",   "请输入字典类型",   "字典状态",   "字典编号",   "备注",   "结束日期",   "开始时间" ];
   model	模块名称	string	'zidian'
   ref	写死不用该	string	i18ncomponent

4. 组件使用具体步骤：

• 引入

  import I18nTable from "@/components/I18nTable";

• 注册

    components: {
      I18nTable,
    },

  找到el-table组件，用组件包裹起来

    <I18nTable :fields="fields" model="zidian" ref="i18ncomponent">
          <el-table
            v-loading="loading"
            :data="typeList"
            @selection-change="handleSelectionChange"
          >
            <el-table-column type="selection" width="55" align="center" />
  .......
  .....
  </I18nTable>

• 将这两行代码放到methods里面

   matchKey(name) {
        return this.$refs.i18ncomponent?.matchKey(name)
      },
      refresh() {
        this.$forceUpdate();
      },

• 替换，找到页面所有想做成国际化配置的元素，放在fIelds变量上

  const CONFIG_FIELDS = [
    "字典名称",
    "字典类型",
    "状态",
    "创建时间",
    "请输入字典名称",
    "请输入字典类型",
    "字典状态",
    "字典编号",
    "备注",
    "结束日期",
    "开始时间"
  ];
  
   data() {
      return {
        fields: CONFIG_FIELDS,
  ...

• 剩下的就很简单了，找到对应的汉字直接加上match就行，例如原来代码里面是字典名称，现在只要改成$t(matchKey('字典名称')) 

  原来：
     
   <el-form-item label="字典名称" prop="dictName">
  
  现在：
   <el-form-item :label="$t(matchKey('字典名称'))" prop="dictName">

• 对于封装的二开组件，直接修改组件源码解决
• 对于element-ui内部组件

npm install element-ui/lib/locale/lang/zh-CN --save

npm install element-ui/lib/locale/lang/en --save



import enLocale from 'element-ui/lib/locale/lang/en';

import zhLocale from 'element-ui/lib/locale/lang/zh-CN';

切换语言的时候直接

ElementUI.locale(enLocale);

this.$i18n.locale = lang;