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

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

安装

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

i18n.js

import{createI18n}from'vue-i18n'consti18n=createI18n({locale:'zh_CN',messages:{zh_CN:{// ...},en_US:{// ...}}})exportdefaulti18n

main.js

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

使用

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

<template><div><vxe-grid:columns="tableColumn":data="tableData"></vxe-grid></div></template><scriptsetup>import{ref}from'vue'consttableColumn=ref([{type:'seq',width:70},{field:'name',title:'app.body.name'},{field:'sex',title:'app.body.sex'},{field:'age',title:'app.body.age'}])consttableData=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