el-select 点击显示问题，求解惑

Question

vue 在使用elementUI 的时候，el-select标签，鼠标点击下拉框选项的时候，下拉框出现，当点击其他地方的时候，下拉框也会消失，但是再次点击下拉框按钮的时候，需要点击两次才能显示，因为我自己设置了开关的变量，点击其他地方下拉框也消失，我变量里还是开的状态，所以需要点击两次才能再次打开下拉框，我想要实现点击一次就能打开下拉框、有没有什么好的思路，借鉴一下

Answer 1

不知道你这个问题是否已经解决, 如果还没有解决的话:

• 这个问题的回答你可以参考下: https://ask.csdn.net/questions/7417401
• 以下回答由chatgpt基于相关博客总结生成:

  问题分析: 根据问题描述，你的需求是想要实现点击一次下拉框按钮就能打开下拉框，而不需要点击两次。目前的问题是，当点击其他地方导致下拉框消失时，开关变量的状态没有同步更新。因此，需要通过监听点击事件，来实时更新开关变量的状态。

  解决方案:

  1. 首先，在data中定义一个名为showSelect的开关变量，并初始化为false。

  data() {
    return {
      showSelect: false
    }
  }
  

  1. 在el-select标签上绑定v-model指令，将其与showSelect变量进行双向绑定。

  <el-select v-model="showSelect">
    <!-- 下拉框选项 -->
  </el-select>
  

  1. 在mounted生命周期钩子函数中，添加一个全局点击事件监听器。当点击事件发生时，判断点击的元素是否为el-select及其子元素。如果不是，则将showSelect变量置为false，关闭下拉框。

  mounted() {
    document.addEventListener('click', this.closeSelect);
  },
  methods: {
    closeSelect(event) {
      const target = event.target;
      const select = document.querySelector('.el-select');
      if (!select.contains(target)) {
        this.showSelect = false;
      }
    }
  }
  

  通过以上的步骤，你可以实现点击一次下拉框按钮就能打开下拉框的需求。点击其他地方时，下拉框会自动关闭，并且下次点击下拉框按钮时，下拉框会立即打开，不再需要点击两次。

如果你已经解决了该问题, 非常希望你能够分享一下解决方案, 写成博客, 将相关链接放在评论区, 以帮助更多的人 ^-^