当前位置：首页 > news >正文

el-table得i18国际化写法（我自己项目的大致写法）

news 来源：原创 2025/5/10 19:49:26

1.要全局注册

//index.js里

import i18n from '../src/locales/i18n'

import zhCn from 'element-plus/es/locale/lang/zh-cn'
import en from 'element-plus/es/locale/lang/en'

//挂载一下，默认使用中文，具体的还得自己搜一下
currentApp.use(i18n)
currentApp.use(ElementPlus, {
  locale: zhCn
})

2.在src下新建locales文件夹，里面放三个js文件：en.json,zh.json,i18n.js

en.json:

{
  "message": {
    "inputValue": "input value",
    
  }
}

zh.json:

{
  "message": {
    "inputValue": "输入值",
   
  }
}

i18.js:

import Vue from 'vue'
import { createI18n } from 'vue-i18n'
//引入两个文件，中英文得
import en from './en.json'
import zh from './zh.json'

const i18n = createI18n({
  locale: 'zh', // 设置默认语言
  messages: {
    en,
    zh
  }
})

export default i18n

3.css中英文切换按钮和对应的方法

  <el-select @change="toggleLang" v-model="langChange" placeholder="选择语言" style="width: 140px;">
          <el-option v-for="(item,index) in i18Array" :label='item.label' :key="index" :value="item.value"></el-option>
        </el-select>

function toggleLang(val) {
  i18n.global.locale = val // 更新 i18n 的 locale
}
let langChange = ref('zh')
const i18Array = ref([
  {
    value: 'zh',
    label: '中文'
  },
  {
    value: 'en',
    label: 'English'
  }
])

4.使用i8n

   <el-table-column prop="flowrate" :label="$t('message.flowRate')" width="180">
            <template #default="scope">
              {{(countvalue(scope.$index)).toFixed(2)}}
            </template>
          </el-table-column>