antd-vue - - - - - a-select结合i18n使用(踩坑问题)
- 1. 当前代码 & 效果
- 2. 解决办法
- ====
1. 当前代码 & 效果
<a-selectv-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-selectv-model:value="formState.quickSwitching"@change="quickChange"><a-select-optionv-for="option in quickSwitchingOptions":key="option.value":value="option.value">{{ option.label }}</a-select-option></a-select>
如此即可正常切换
====
注意:
尽量使用.tm()
格式,如下:
i18n.global.tm("****.**")
使用.t()
会遇到各种莫名的问题