企业官网建设流程全解析

第5节：下拉弹窗内容定制 —— 搜索过滤、分组、自定义插槽

本节深入弹窗内部：怎么在弹窗里加搜索框、给选项分组、在弹窗底部塞自定义内容（比如 “新增选项” 按钮）。

核心知识点

1. filterable：给 el-select 加可搜索能力，弹窗顶部自动出现输入框，按 label 模糊匹配
2. <el-option-group>：选项分组，弹窗内出现分组标题
3. #header/#footer插槽：往弹窗头部 / 底部塞自定义内容（Element Plus 2.4+ 支持）
4. filter-method：自定义搜索过滤逻辑（默认按 label 匹配）

完整可测试代码

<template> <div class="container"> <h4>带搜索 + 分组 + 底部自定义按钮的下拉弹窗</h4> <el-select v-model="selected" filterable placeholder="输入关键字搜索" style="width: 280px" > <!-- 弹窗底部插槽：加一个"新增选项"按钮 --> <template #footer> <div class="footer-box"> <el-button size="small" type="primary" @click="addOption"> + 新增选项 </el-button> </div> </template> <!-- 分组：前端框架 --> <el-option-group label="前端框架"> <el-option label="Vue 3" value="vue" /> <el-option label="React" value="react" /> <el-option label="Angular" value="angular" /> </el-option-group> <!-- 分组：后端语言 --> <el-option-group label="后端语言"> <el-option label="Node.js" value="node" /> <el-option label="Go" value="go" /> <el-option label="Python" value="python" /> </el-option-group> </el-select> <p style="margin-top: 16px">当前选中：{{ selected }}</p> </div> </template> <script setup> import { ref } from 'vue' import { ElMessage } from 'element-plus' const selected = ref('') const addOption = () => { ElMessage.success('点击了底部"新增选项"按钮（这里可以打开新增弹窗）') } </script> <style scoped> .container { padding: 20px; } .footer-box { padding: 8px 12px; border-top: 1px solid #ebeef5; } </style>

测试要点

1. 点开下拉，弹窗顶部自动出现搜索输入框，输入vue只显示匹配项
2. 选项按 “前端框架 / 后端语言” 两组展示，带分组标题
3. 滚动到弹窗最底部，能看到 “+ 新增选项” 按钮，点击触发消息提示
4. 清空搜索框后，所有选项恢复显示

业务常见场景

• 远程搜索（filterable + remote）：选项来自接口，用户输入关键字时调接口。下一节会讲。
• 弹窗底部放 “加载更多”：用#footer插槽 + 滚动到底事件实现分页加载。

今天 10:18