Hinweis: Dieser Blog wird vom Blogger Wort für Wort geschrieben, was nicht einfach ist. Bitte respektieren Sie die Originalität, vielen Dank an alle!
Problembeschreibung
Wenn die Standardeinstellung Chinesisch ist, klicken Sie auf das Dropdown-Menü für die Layoutgröße, um Chinesisch normal anzuzeigen. Wenn Sie zu Englisch wechseln, klicken Sie erneut auf das Dropdown-Menü, dann wird es weiterhin auf Chinesisch angezeigt.
Lösung
Originalcode
<template>
<el-dropdown trigger="click" @command="handleSetSize">
<div>
<svg-icon class-name="size-icon" icon-class="size" />
</div>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item v-for="item of sizeOptions" :key="item.value" :disabled="size===item.value" :command="item.value">
{
{
item.label }}
</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
</template>
<script>
export default {
data() {
return {
sizeOptions: [
{
label: this.$t('sizeSelect.default'), value: 'default' },
{
label: this.$t('sizeSelect.medium'), value: 'medium' },
{
label: this.$t('sizeSelect.small'), value: 'small' },
{
label: this.$t('sizeSelect.mini'), value: 'mini' }
]
}
}
}
Code ändern
Eine sehr einfache und gängige Lösung besteht darin, die Idee zu ändern und in der Vorlage zu verwenden$t
<template>
<el-dropdown trigger="click" @command="handleSetSize">
<div>
<svg-icon class-name="size-icon" icon-class="size" />
</div>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item v-for="item of sizeOptions" :key="item.value" :disabled="size===item.value" :command="item.value">
{
{
$t(item.label) }}
</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
</template>
<script>
export default {
data() {
return {
// label这样写法可以解决切换中英文时，下拉列表不能刷新的情况
sizeOptions: [
{
label: 'sizeSelect.default', value: 'default' },
{
label: 'sizeSelect.medium', value: 'medium' },
{
label: 'sizeSelect.small', value: 'small' },
{
label: 'sizeSelect.mini', value: 'mini' }
]
}
}
}
endgültige Wirkung
