elementui 弹出选择框

Element UI 是一套基于 Vue.js 的开源 UI 组件库，它提供了一套丰富的组件供前端开发者使用，其中包括了一个用于弹出选择项的组件——`el-dialog`，可以结合 `el-select` 或其他表单组件来创建选择框。

`el-dialog` 是一个可定制的对话框，常用于显示模态内容，如弹窗确认、选项选择等场景。如果你想展示一个选择列表让用户进行选择，可以这样做：

1. 首先，引入必要的 Element UI 库和组件：

<template>
  <div>
    <button @click="showDialog">打开选择框</button>
    <el-dialog :visible.sync="dialogVisible" title="选择">
      <el-select v-model="selectedValue">
        <!-- 这里添加你的选项 -->
        <el-option
          v-for="item in options"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        ></el-option>
      </el-select>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">关闭</el-button>
        <el-button type="primary">确定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      dialogVisible: false,
      selectedValue: '',
      options: [
        // 假设你有一组选项...
      ]
    };
  },
  methods: {
    showDialog() {
      this.dialogVisible = true;
    }
  }
};
</script>

在这个例子中，当点击按钮时，会触发 `showDialog` 方法打开对话框，用户可以在 `el-select` 中选择一个值，选择之后 `selectedValue` 就会被更新，并且点击“确定”或关闭按钮可以关闭对话框。