antd-vue - - - - - a-select结合i18n使用(踩坑问题)
- 1. 当前代码 & 效果
- 2. 解决办法
- ====
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()
会遇到各种莫名的问题