Vue3 + Element Plus el-select 下拉弹窗

el-select 下拉弹窗 分章节手把手教程

基于 Vue3 + Element Plus，使用 <el-select>，配套下拉弹窗（el-select 自带的 popover 下拉面板）

前置：已经建好 Vue3 + Element Plus 项目，已全局 / 按需引入 Element Plus。

第 1 节：基础框架搭建 - 最简单 el-select

新建组件 SelectDemo.vue，完整代码：

<template>
  <div class="demo-box">
    <h3>el-select 基础示例</h3>
    <!-- 选择器，v-model绑定选中值 -->
    <el-select v-model="value" placeholder="请选择">
      <el-option
        v-for="item in options"
        :key="item.value"
        :label="item.label"
        :value="item.value"
      />
    </el-select>
  </div>
</template>

<script setup>
import { ref } from 'vue'
// 选中值
const value = ref('')
// 下拉选项数据源
const options = ref([
  { label: '选项1', value: '1' },
  { label: '选项2', value: '2' },
  { label: '选项3', value: '3' },
])
</script>

<style scoped>
.demo-box {
  padding: 30px;
}
</style>

本节知识点

1. el-select：选择器主体，下拉弹窗是组件内部封装的 popover，不需要自己写弹窗 DOM
2. v-model：绑定选中项的值，不是 label
3. el-option：下拉每一项，label 页面展示文字，value 实际提交的值
4. 点击输入框，自动弹出下拉面板；点击空白 / 选中一项自动关闭

测试任务

运行页面，测试：

• 点击选择框，下拉弹窗是否正常弹出
• 点击选项，输入框是否显示对应 label，v-model 值是否变更
• 点击页面空白处，下拉弹窗是否关闭