vxe-table vue-i18n 中英文配置

官网：Vxe Table v4.6

main.js

main.js

import locale from "element-plus/lib/locale/lang/zh-cn";
import moment from "moment";
import i18n from "./i18n/index.js";
import VXETable from "vxe-table";

import "moment/locale/zh-cn";
moment.locale("zh-cn");

const app = createApp(App);
app.use(FormMaking, {
	locale: "zh-cn",
});


VXETable.setup({
	// 对组件内置的提示语进行国际化翻译
	i18n: (key, args) => i18n.global.t(key, args),
	
});


function useTable (app) {
	app.use(VXETable)
	app.use(i18n)
}
//挂载app
// app.mount("#app");
app.use(useTable).mount('#app');

i18n/index.js

//i18n/index.js

import { createI18n } from 'vue-i18n/index'
import tool from '@/utils/tool'

import enLocale from './locale/en.js';
import zhLocale from './locale/zh.js';
import zhCN from 'vxe-table/lib/locale/lang/zh-CN'
import enUS from 'vxe-table/lib/locale/lang/en-US'

const messages = {
	zh_CN: {
		...zhCN,
		...zhLocale
	},
	en_US: {
		...enUS,
		...enLocale
	}
}

const i18n = createI18n({
	locale: tool.data.get('language') ||  'zh_CN',
	messages,
})

export default i18n

en,js

var enLocale = {
	/* 登录模块 */
	huanyingdenglu: 'Welcome to log in',
};

export default enLocale;

zh.js

var zhLocale = {
	/* 登录相关 */
	huanyingdenglu: '欢迎登录',
};

export default zhLocale;

使用

    <div class="login-form-title">{{$t('huanyingdenglu')}}</div>