antd-vue - - - - - a-select结合i18n使用(踩坑问题)

antd-vue - - - - - a-select结合i18n使用(踩坑问题)

1. 当前代码 & 效果

<a-select
  v-model:value="formState.quickSwitching"
  :options="quickSwitchingOptions"
  @search="handleSearch"
  @change="handleChange"
></a-select>

options配置

    // 快速选择
    const quickSwitchingOptions = ref([
      {
        value: "please",
        label: computed(() => i18n.global.tm("dataService.please")),
      },
      {
        value: "day",
        label: computed(() => i18n.global.tm("dataService.today")),
      },
      {
        value: "week",
        label: computed(() => i18n.global.tm("dataService.thisWeek")),
      },
      {
        value: "month",
        label: computed(() => i18n.global.tm("dataService.thisMonth")),
      },
    ]);

language的配置

  dataService: {
    please: "请选择",
    today: "本日",
    thisWeek: "本周",
    thisMonth: "本月"
  }

初展示中文没有问题,但是在切换语言模式为其他语言时,select的option并没有跟着变化
在这里插入图片描述

2. 解决办法

使用select的另一种写法:

  <a-select
    v-model:value="formState.quickSwitching"
    @change="quickChange"
  >
    <a-select-option
      v-for="option in quickSwitchingOptions"
      :key="option.value"
      :value="option.value"
    >
      {{ option.label }}
    </a-select-option>
  </a-select>

如此即可正常切换
在这里插入图片描述

====

注意:
尽量使用.tm()格式,如下:
i18n.global.tm("****.**")

使用.t()会遇到各种莫名的问题

  • 5
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值