如何让Vue Good Table的data属性label实现响应式多语言切换？

方法一：使用计算属性（推荐） #

把columns定义为计算属性，利用Vue计算属性的响应式特性，语言切换时自动重新生成带最新翻译的列配置：

computed: {
  columns() {
    return [
      {
        label: this.$i18n.t('test1'),
        field: 'typeName',
      },
      {
        label: this.$i18n.t('test2'),
        field: 'groupName',
      }
    ]
  }
}

计算属性会自动追踪this.$i18n的变化，当语言切换时，$i18n.t()返回的翻译文本更新，计算属性会重新求值，Vue Good Table就能实时获取最新的label，无需刷新页面。

方法二：监听locale变化手动更新 #

如果需要保留data中的columns，可以通过监听i18n的locale变化，手动更新列的label：

data() {
  return {
    columns: [
      {
        label: this.$i18n.t('test1'),
        field: 'typeName',
      },
      {
        label: this.$i18n.t('test2'),
        field: 'groupName',
      }
    ]
  }
},
watch: {
  '$i18n.locale'() {
    // 直接更新label字段，避免重新创建整个数组
    this.columns[0].label = this.$i18n.t('test1')
    this.columns[1].label = this.$i18n.t('test2')
  }
}

当语言切换时，watch监听到locale变化，立即更新对应列的label值，触发Vue的响应式更新，表格会自动刷新显示新的翻译内容。

内容的提问来源于stack exchange，提问作者Jesus