是否有方法以i18n格式以vue3格式编写表中的标头？

Question

我想用i18n格式在表中写入标题名，我在我的项目中使用vue3。(当然还有打字稿).Thanks提前！

这是我的html代码

<Datatable
        :table-data="tableData"
        :table-header="tableHeader"
        :enable-items-per-page-dropdown="false"
        :loading="isTableLoading"
        :is-pagination="false"
        class="activity-table"
      >
      .
      .
      . </Datatable>

这是我的脚本代码

import { useI18n } from "vue-i18n/index";
const { t, te } = useI18n();
const tableHeader = ref([
  {
    name: "Username",
    key: "name",
    sortable: false,
  },
  {
    name: "Email",
    key: "email",
    sortable: false,
  },
  {
    name: "Phone",
    key: "phone",
    sortable: false,
  },
  .
  .
  . ]);

Answer 1

因为脚本代码将在组件加载之前执行。因此，当时可能无法使用i18n库。因此，您可以尝试的是在tableHeader生命周期挂钩中转换组件本身中的mounted()对象属性。

示例(在vue组件中) :

mounted() {
  this.tableHeader.forEach((obj) => {
    obj.name = this.$t(obj.name)
  });
}