解决Vue+Element UI使用el-dropdown(下拉菜单)国际化时菜单label信息没有刷新的情况

「爱情、让人受尽委屈。」 2024-03-23 19:23 73阅读 0赞

说明：该篇博客是博主一字一码编写的，实属不易，请尊重原创，谢谢大家！

### 问题描述 ###

在默认中文时，点击布局大小下拉菜单正常显示中文，此时切换至英文时，再次点击下拉菜单，还是中文  
  
![在这里插入图片描述][bda352fe3cd74782acc39490fb3435bc.png]

### 解决方法 ###

#### 原始代码 ####

<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' }
          ]
        }
      }
    }

#### 修改代码 ####

很简单通用的处理就是转换下思路，在模板中使用`$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' }
          ]
        }
      }
    }

### 最终效果 ###

![在这里插入图片描述][e6ebf035dc7d438888737da6011340e7.gif_pic_center]

[bda352fe3cd74782acc39490fb3435bc.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/14/cd2a3a6801014d5bb21df9f856bd6b0d.png
[e6ebf035dc7d438888737da6011340e7.gif_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/14/68cb9a35744a43798e2def00a105849f.png