解决 element select 组件下拉框切换页面时无法自动关闭的问题

2024-01-15 13:29:33

问题
在使用 element select 组件时，在 spa 项目中对 vue-router 使用了 keep-alive，导致在 A 页面打开 select 的下拉框，直接切换到 B 页面时，下拉框不会自动关闭。

解决方案
要在 spa 项目中解决 element select 组件的下拉框在切换页面时无法自动关闭的问题，可以采用以下解决方案：

在组件中使用 v-if 控制下拉框的显示和隐藏

<template>
  <div v-if="showDropdown">
    <el-select v-model="selectedValue">
      <el-option v-for="option in options" :key="option.value" :label="option.label" :value="option.value"></el-option>
    </el-select>
  </div>
</template>

<script>
export default {
  data() {
    return {
      showDropdown: false,
      selectedValue: '',
      options: [
        {
          value: 'A',
          label: 'Option A'
        },
        {
          value: 'B',
          label: 'Option B'
        },
        {
          value: 'C',
          label: 'Option C'
        }
      ]
    }
  },
  methods: {
    toggleDropdown() {
      this.showDropdown = !this.showDropdown
    }
  }
}
</script>

在页面切换时使用 nextTick 来延迟关闭下拉框

<template>
  <div>
    <el-select v-model="selectedValue">
      <el-option v-for="option in options" :key="option.value" :label="option.label" :value="option.value"></el-option>
    </el-select>
  </div>
</template>

<script>
export default {
  data() {
    return {
      selectedValue: '',
      options: [
        {
          value: 'A',
          label: 'Option A'
        },
        {
          value: 'B',
          label: 'Option B'
        },
        {
          value: 'C',
          label: 'Option C'
        }
      ]
    }
  },
  methods: {
    closeDropdown() {
      this.$nextTick(() => {
        this.$refs.select.close()
      })
    }
  }
}
</script>