vxe-table 如何对表格列的 title 标题进行国际化翻译

vxe-table 如何对表格列的 title 标题进行国际化翻译

查看官网：https://vxetable.cn
gitbub：https://github.com/x-extends/vxe-table
gitee：https://gitee.com/x-extends/vxe-table

安装

首先确保项目中已经安装 vue-i18n 并且已经引入项目中

i18n.js

import { createI18n } from 'vue-i18n'

const i18n = createI18n({
  locale: 'zh_CN',
  messages: {
    zh_CN: {
      // ...
    },
    en_US: {
      // ...
    }
  }
})

export default i18n     

main.js

 import i18n from './i18n'
 import { VxeUI } from 'vxe-pc-ui'

 VxeUI.setConfig({
   // 对组件内置的提示语进行国际化翻译
   translate (key, args) {
     // 此处会对所有支持的内容进行翻译，可以判断一下再翻译
     if (key && key.indexOf('.') > -1) {
       return i18n.global.t(key, args)
     }
     return key
   }
 })

使用

直接在 title 配置对应的国际化 key 就可以了

<template>
 <div>
    <vxe-grid :columns="tableColumn" :data="tableData"></vxe-grid>
  </div>
</template>

<script setup>
import { ref } from 'vue'

const tableColumn = ref([
  { type: 'seq', width: 70 },
  { field: 'name', title: 'app.body.name' },
  { field: 'sex', title: 'app.body.sex' },
  { field: 'age', title: 'app.body.age' }
])

const tableData = ref([
  { id: 10001, name: 'Test1', role: 'Develop', sex: 'Man', age: 28, address: 'test abc' },
  { id: 10002, name: 'Test2', role: 'Test', sex: 'Women', age: 22, address: 'Guangzhou' },
  { id: 10003, name: 'Test3', role: 'PM', sex: 'Man', age: 32, address: 'Shanghai' },
  { id: 10004, name: 'Test4', role: 'Designer', sex: 'Women', age: 24, address: 'Shanghai' }
])
</script>

https://gitee.com/x-extends/vxe-table