给 element plus 的 select 选择框 添加一个按钮 来触发 下拉列表

Element Plus 是一个基于 Vue 3 的组件库，提供了丰富的 UI 组件，其中 `el-select` 组件是用于实现下拉选择功能的组件。要给 `el-select` 添加一个按钮来触发下拉列表，可以通过修改 `el-select` 的 `ref` 属性来获取 DOM 元素，并通过 DOM 操作或组件的方法来控制下拉列表的显示。

下面是一个基本的示例代码，展示如何通过按钮点击来控制 `el-select` 的下拉列表：

<template>
  <div>
    <!-- 给按钮设置点击事件来打开下拉列表 -->
    <el-button @click="openSelect">打开下拉列表</el-button>
    <!-- 给 select 设置 ref 属性，以便在代码中访问 -->
    <el-select v-model="value" ref="mySelect">
      <el-option
        v-for="item in options"
        :key="item.value"
        :label="item.label"
        :value="item.value">
      </el-option>
    </el-select>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import { ElSelect, ElOption, ElButton } from 'element-plus';

const value = ref('');
const options = ref([
  { value: '选项1', label: '黄金糕' },
  { value: '选项2', label: '双皮奶' },
  { value: '选项3', label: '蚵仔煎' },
  { value: '选项4', label: '龙须面' },
  { value: '选项5', label: '北京烤鸭' }
]);

// 通过 ref 获取到 el-select 组件的实例
const mySelect = ref(null);

const openSelect = () => {
  // 打开下拉列表
  if (mySelect.value) {
    mySelect.value.open();
  }
};
</script>

在上面的代码中，我们使用了 `ref` 来引用 `el-select` 组件，并定义了一个名为 `openSelect` 的方法，该方法通过调用 `el-select` 实例的 `open()` 方法来打开下拉列表。这个方法被绑定到了一个按钮的点击事件上，当点击按钮时，就会触发下拉列表的显示。