vue3+vxe-table+ts国际化

在Vue3中使用vxe-table和TypeScript进行国际化的步骤如下：

1. 首先，安装vxe-table和vue-i18n依赖：

npm install vxe-table vue-i18n

2. 在Vue的入口文件（通常是main.ts）中，引入vxe-table和vue-i18n，并进行相关配置：

import { createApp } from 'vue';
import App from './App.vue';
import XEUtils from 'xe-utils';
import VXETable from 'vxe-table';
import 'vxe-table/lib/style.css';
import { createI18n } from 'vue-i18n';

// 导入vxe-table的国际化语言包
import zhCN from 'vxe-table/lib/locale/lang/zh-CN';
import enUS from 'vxe-table/lib/locale/lang/en-US';

// 创建vue-i18n实例
const i18n = createI18n({
  locale: 'zh-CN', // 设置默认语言
  messages: {
    'zh-CN': zhCN,
    'en-US': enUS
  }
});

// 使用vxe-table
const app = createApp(App);
app.use(VXETable);
app.use(i18n);
app.mount('#app');

3. 在组件中使用vxe-table的国际化功能，可以通过`$t`方法来获取对应的翻译文本：

<template>
  <div>
    <vxe-table :data="tableData">
      <vxe-table-column type="index" title="序号"></vxe-table-column>
      <vxe-table-column field="name" title="姓名"></vxe-table-column>
      <vxe-table-column field="age" title="年龄"></vxe-table-column>
    </vxe-table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        { name: '张三', age: 20 },
        { name: '李四', age: 25 },
        { name: '王五', age: 30 }
      ]
    };
  }
};
</script>

4. 在组件中使用vue-i18n的国际化功能，可以通过`$t`方法来获取对应的翻译文本：

<template>
  <div>
    <p>{{ $t('message.greeting') }}</p>
  </div>
</template>

<script>
export default {
  mounted() {
    console.log(this.$t('message.greeting'));
  }
};
</script>