第7节多选模式、自定义选项渲染、受控弹窗显隐本节讲三个高频进阶点多选标签、弹窗里自定义选项长什么样、用代码主动打开 / 关闭下拉弹窗。核心知识点multiple开启多选选中项以 tag 标签形式展示collapse-tags多选时折叠标签只显示第一个 “N”el-option默认插槽自定义每一项的渲染内容图标、状态、描述文字v-model:visible受控弹窗显隐用代码主动控制弹窗打开 / 关闭替代手动点完整可测试代码template div classcontainer h4多选 自定义选项 受控弹窗/h4 el-select v-modelselectedList multiple collapse-tags collapse-tags-tooltip :visiblepopVisible placeholder请选择技术栈可多选 stylewidth: 360px visible-change(v) popVisible v !-- 自定义选项内容图标 名称 描述 -- el-option v-foritem in options :keyitem.value :labelitem.label :valueitem.value div classoption-row span classdot :style{ background: item.color }/span span classname{{ item.label }}/span span classdesc{{ item.desc }}/span /div /el-option /el-select div stylemargin-top: 16px el-button sizesmall clickpopVisible true代码打开弹窗/el-button el-button sizesmall clickpopVisible false代码关闭弹窗/el-button el-button sizesmall clickselectedList [vue, go]代码默认选中两项/el-button /div p stylemargin-top: 12px选中值{{ selectedList }}/p /div /template script setup import { ref } from vue const selectedList ref([]) const popVisible ref(false) const options ref([ { label: Vue, value: vue, desc: 渐进式框架, color: #42b883 }, { label: React, value: react, desc: UI 库, color: #61dafb }, { label: Angular, value: angular, desc: 全功能框架, color: #dd0031 }, { label: Node.js, value: node, desc: 服务端 JS, color: #68a063 }, { label: Go, value: go, desc: 云原生首选, color: #00add8 }, { label: Python, value: python, desc: AI 首选, color: #ffd43b }, ]) /script style scoped .container { padding: 20px; } .option-row { display: flex; align-items: center; gap: 8px; width: 100%; } .dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; } .name { flex: 1; } .desc { font-size: 12px; color: #909399; } /style测试要点点开下拉每个选项是自定义渲染左侧彩色圆点 名称 灰色描述文字多选几个选项输入框里标签折叠成 “第一个 2”鼠标悬停 2 能看到完整标签collapse-tags-tooltip点 “代码打开弹窗” 按钮弹窗自动弹出点 “代码关闭弹窗” 自动收起点 “代码默认选中两项”selectedList被赋值输入框同步显示对应标签业务坑提醒自定义选项渲染时label必须保留它负责选中后输入框显示的文字和搜索匹配插槽只改弹窗里的长相v-model:visible受控后一定要监听visible-change把用户手动开合的状态同步回来否则会 “点不开 / 关不掉”
第7节多选模式、自定义选项渲染、受控弹窗显隐本节讲三个高频进阶点多选标签、弹窗里自定义选项长什么样、用代码主动打开 / 关闭下拉弹窗。核心知识点multiple开启多选选中项以 tag 标签形式展示collapse-tags多选时折叠标签只显示第一个 “N”el-option默认插槽自定义每一项的渲染内容图标、状态、描述文字v-model:visible受控弹窗显隐用代码主动控制弹窗打开 / 关闭替代手动点完整可测试代码template div classcontainer h4多选 自定义选项 受控弹窗/h4 el-select v-modelselectedList multiple collapse-tags collapse-tags-tooltip :visiblepopVisible placeholder请选择技术栈可多选 stylewidth: 360px visible-change(v) popVisible v !-- 自定义选项内容图标 名称 描述 -- el-option v-foritem in options :keyitem.value :labelitem.label :valueitem.value div classoption-row span classdot :style{ background: item.color }/span span classname{{ item.label }}/span span classdesc{{ item.desc }}/span /div /el-option /el-select div stylemargin-top: 16px el-button sizesmall clickpopVisible true代码打开弹窗/el-button el-button sizesmall clickpopVisible false代码关闭弹窗/el-button el-button sizesmall clickselectedList [vue, go]代码默认选中两项/el-button /div p stylemargin-top: 12px选中值{{ selectedList }}/p /div /template script setup import { ref } from vue const selectedList ref([]) const popVisible ref(false) const options ref([ { label: Vue, value: vue, desc: 渐进式框架, color: #42b883 }, { label: React, value: react, desc: UI 库, color: #61dafb }, { label: Angular, value: angular, desc: 全功能框架, color: #dd0031 }, { label: Node.js, value: node, desc: 服务端 JS, color: #68a063 }, { label: Go, value: go, desc: 云原生首选, color: #00add8 }, { label: Python, value: python, desc: AI 首选, color: #ffd43b }, ]) /script style scoped .container { padding: 20px; } .option-row { display: flex; align-items: center; gap: 8px; width: 100%; } .dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; } .name { flex: 1; } .desc { font-size: 12px; color: #909399; } /style测试要点点开下拉每个选项是自定义渲染左侧彩色圆点 名称 灰色描述文字多选几个选项输入框里标签折叠成 “第一个 2”鼠标悬停 2 能看到完整标签collapse-tags-tooltip点 “代码打开弹窗” 按钮弹窗自动弹出点 “代码关闭弹窗” 自动收起点 “代码默认选中两项”selectedList被赋值输入框同步显示对应标签业务坑提醒自定义选项渲染时label必须保留它负责选中后输入框显示的文字和搜索匹配插槽只改弹窗里的长相v-model:visible受控后一定要监听visible-change把用户手动开合的状态同步回来否则会 “点不开 / 关不掉”
