第5节下拉弹窗内容定制 —— 搜索过滤、分组、自定义插槽本节深入弹窗内部怎么在弹窗里加搜索框、给选项分组、在弹窗底部塞自定义内容比如 “新增选项” 按钮。核心知识点filterable给 el-select 加可搜索能力弹窗顶部自动出现输入框按 label 模糊匹配el-option-group选项分组弹窗内出现分组标题#header/#footer插槽往弹窗头部 / 底部塞自定义内容Element Plus 2.4 支持filter-method自定义搜索过滤逻辑默认按 label 匹配完整可测试代码template div classcontainer h4带搜索 分组 底部自定义按钮的下拉弹窗/h4 el-select v-modelselected filterable placeholder输入关键字搜索 stylewidth: 280px !-- 弹窗底部插槽加一个新增选项按钮 -- template #footer div classfooter-box el-button sizesmall typeprimary clickaddOption 新增选项 /el-button /div /template !-- 分组前端框架 -- el-option-group label前端框架 el-option labelVue 3 valuevue / el-option labelReact valuereact / el-option labelAngular valueangular / /el-option-group !-- 分组后端语言 -- el-option-group label后端语言 el-option labelNode.js valuenode / el-option labelGo valuego / el-option labelPython valuepython / /el-option-group /el-select p stylemargin-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测试要点点开下拉弹窗顶部自动出现搜索输入框输入vue只显示匹配项选项按 “前端框架 / 后端语言” 两组展示带分组标题滚动到弹窗最底部能看到 “ 新增选项” 按钮点击触发消息提示清空搜索框后所有选项恢复显示业务常见场景远程搜索filterable remote选项来自接口用户输入关键字时调接口。下一节会讲。弹窗底部放 “加载更多”用#footer插槽 滚动到底事件实现分页加载。今天 10:18
