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>

本节知识点

测试任务

运行页面，测试：

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