elementui 点击按钮弹出选择框

### 回答1：
您好，要在 element-ui 中使用点击按钮弹出选择框，可以使用 element-ui 提供的 Select 组件。

首先，在您的模板中添加一个 Select 组件：

<template>
  <div>
    <el-button @click="showSelect">选择</el-button>
    <el-select v-model="selected" v-show="isShowSelect" @close="closeSelect" placeholder="请选择">
      <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option>
    </el-select>
  </div>
</template>

然后，在您的脚本中定义 showSelect 和 closeSelect 方法：

<script>
export default {
  data() {
    return {
      isShowSelect: false,
      selected: '',
      options: [
        { value: '选项1', label: '黄金糕' },
        { value: '选项2', label: '双皮奶' },
        { value: '选项3', label: '蚵仔煎' }
      ]
    }
  },
  methods: {
    showSelect() {
      this.isShowSelect = true
    },
    closeSelect() {
      this.isShowSelect = false
    }
  }
}
</script>

这样，当您点击按钮时，选择框就会弹出，当您在选择框中选择了一个选项后，选择框就会消失。

### 回答2：
elementui中有一个组件是Select选择框，可以通过点击按钮来弹出选择框。具体实现的代码如下：

1. 首先，在页面中引入elementui的组件库和样式文件：

<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/element-ui/lib/index.js"></script>

2. 创建一个Vue实例，并在实例中注册Select组件：

<div id="app">
  <el-button @click="showSelect = true">点击按钮</el-button>
  <el-select v-model="selectedOption" :visible.sync="showSelect" @remove-tag="showSelect = false">
    <el-option v-for="option in options" :key="option" :label="option" :value="option">
    </el-option>
  </el-select>
</div>

3. 在Vue实例中定义数据和方法：

new Vue({
  el: '#app',
  data() {
    return {
      showSelect: false,
      selectedOption: '',
      options: ['选项1', '选项2', '选项3']
    }
  }
})

通过以上代码，在页面中会渲染一个按钮和一个选择框。当点击按钮时，选择框会弹出，并显示选项列表。用户可以选择其中的选项，选项的值会绑定到selectedOption变量上。当用户选择完毕或关闭选择框时，选择框会自动关闭。

### 回答3：
Element UI 是一款基于 Vue.js 的前端框架，它提供了一系列的可重用组件，方便我们快速构建优雅的用户界面。在 Element UI 中，我们可以很方便地通过按钮来触发弹出选择框的功能。

要实现点击按钮弹出选择框，在 Element UI 中，我们可以使用 el-button 和 el-select 这两个组件的配合。首先，我们需要在页面中引入 Element UI，并定义一个按钮和一个选择框组件。代码如下：

<template>
<div>
<el-button @click="showSelect">点击弹出选择框</el-button>
<el-select v-model="selectedValue" v-show="selectVisible" @change="handleChange">
<el-option v-for="item in options" :key="item.value" :value="item.value">{{ item.label }}</el-option>
</el-select>
</div>
</template>

<script>
export default {
data() {
return {
selectedValue: '', // 选择框的选中值
selectVisible: false, // 选择框的显示状态
options: [ // 选择框的选项列表
{ value: 'option1', label: '选项1' },
{ value: 'option2', label: '选项2' },
{ value: 'option3', label: '选项3' }
]
}
},
methods: {
showSelect() { // 点击按钮时触发，显示选择框
this.selectVisible = true;
},
handleChange(value) { // 选择框选中值发生变化时触发
console.log(value);
this.selectedValue = value;
}
}
}
</script>
在上述代码中，我们定义了一个按钮组件 el-button，利用 @click 事件绑定 showSelect 方法，点击按钮时触发显示选择框的操作。而选择框组件 el-select 则使用了 v-show 属性来控制其显示与隐藏的状态。同时，我们还使用了 v-model 来双向绑定选择框的选中值 selectedValue，并通过 @change 事件监听选中值的变化。

这样，当我们点击按钮时，选择框就会弹出来，我们可以在选择框中选择某个选项，然后触发 @change 事件，可以在 handleChange 方法中对选中值进行相应的操作，例如打印选中值的值。

以上就是利用 Element UI 实现点击按钮弹出选择框的方法。