通过一个按钮开控制el-select选择器的下拉框状态

<template>  
  <div>  
    <el-button @click="toggleDropdown">Toggle Dropdown</el-button>  
    <el-select  
      v-model="value"  
      placeholder="请选择"  
      ref="mySelect"  
      @visible-change="handleVisibleChange"
    >  
      <el-option  
        v-for="item in options"  
        :key="item.value"  
        :label="item.label"  
        :value="item.value">  
      </el-option>  
    </el-select>  
    
  </div>  
</template>  

<script>  
export default {  
  data() {  
    return {  
      value: '',  
      options: [  
        { value: 'Option1', label: 'Option 1' },  
        { value: 'Option2', label: 'Option 2' },  
        //...其他选项  
      ],
      isDropdownOpen: false  // 新增一个变量来跟踪下拉框状态
    };  
  },  
  methods: {  
    toggleDropdown() {  
      this.isDropdownOpen = !this.isDropdownOpen;  // 切换状态
      if (this.$refs.mySelect) {
        if (this.isDropdownOpen) {
          this.$refs.mySelect.toggleMenu();  // 打开下拉框
          console.log("打开下拉框")
        } else {
          this.$refs.mySelect.close();  // 关闭下拉框
          console.log("关闭下拉框")
        }
      }
    },  
    handleVisibleChange(isVisible) {  
      this.isDropdownOpen = !isVisible;  
      console.log(isVisible);
    },
  },  
};  
</script>