如何配置Vuetify Data-table支持i18n国际化值的列排序

Vuetify v-data-table 组件默认排序逻辑是读取行数据源中对应列绑定key的原始值做比对，不会解析单元格模板中二次转换渲染的DOM内容。
你当前Insurance Type列的排序失效和i18n本身无关：列绑定的原始key是item.code，翻译文本是在模板里通过insuranceType[item.code]映射渲染的，排序逻辑拿不到渲染后的翻译值；用普通字符串数组时排序"正常"只是取值逻辑刚好巧合匹配，本质是没有给该列指定正确的排序取值规则。
另外你把insuranceType数组定义在data中还有个隐藏问题：切换系统语言时，data里初始化时调用$t生成的返回值不会响应式更新，会导致界面文本不随语言切换刷新。

推荐两种配置方式，任选其一即可：

方案1：给列配置自定义排序函数（改动最小） #

在headers配置中，给Insurance Type列添加自定义sort方法，直接取翻译后的文本做排序比对，不需要修改现有渲染逻辑：

// headers配置示例
headers: [
  // 其他列配置保持不变
  {
    title: "Insurance Type",
    key: "code", // 保持原有绑定的字段key不变
    // 自定义排序逻辑
    sort: (rowA, rowB) => {
      const textA = this.insuranceType[rowA.code].toLowerCase()
      const textB = this.insuranceType[rowB.code].toLowerCase()
      return textA.localeCompare(textB) // 用本地字符串比对方法兼容多语言排序规则
    }
  },
  // 其他列配置保持不变
]

同时记得把insuranceType从data移到computed中，保证语言切换时值能响应式更新：

computed: {
  insuranceType() {
    return [
      this.$t('insuranceType.life'),
      this.$t('insuranceType.health'),
      this.$t('insuranceType.property'),
    ]
  }
}

方案2：数据源提前注入翻译字段（逻辑最直观） #

在处理表格数据源getRows时，提前把翻译后的文本作为冗余字段注入到每一行数据中，列直接绑定这个新字段，使用默认排序即可：

computed: {
  getRows() {
    // 假设原始表格数据存在rawData中
    return this.rawData.map(item => ({
      ...item,
      // 提前注入翻译后的类型文本
      insuranceTypeText: this.$t(`insuranceType.${['life','health','property'][item.code]}`)
    }))
  },
  // 其他computed逻辑...
}

然后修改headers中Insurance Type列的key为insuranceTypeText，单元格模板直接渲染{{ item.insuranceTypeText }}即可，不需要再做索引映射，默认排序会自动读取该字段值排序。

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