第7节：多选模式、自定义选项渲染、受控弹窗显隐
本节讲三个高频进阶点：多选标签、弹窗里自定义选项长什么样、用代码主动打开 / 关闭下拉弹窗。
核心知识点
multiple：开启多选，选中项以 tag 标签形式展示collapse-tags：多选时折叠标签，只显示第一个 + “+N”el-option默认插槽：自定义每一项的渲染内容（图标、状态、描述文字）v-model:visible：受控弹窗显隐，用代码主动控制弹窗打开 / 关闭（替代手动点）
完整可测试代码
<template> <div class="container"> <h4>多选 + 自定义选项 + 受控弹窗</h4> <el-select v-model="selectedList" multiple collapse-tags collapse-tags-tooltip :visible="popVisible" placeholder="请选择技术栈（可多选）" style="width: 360px" @visible-change="(v) => popVisible = v" > <!-- 自定义选项内容：图标 + 名称 + 描述 --> <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" > <div class="option-row"> <span class="dot" :style="{ background: item.color }"></span> <span class="name">{{ item.label }}</span> <span class="desc">{{ item.desc }}</span> </div> </el-option> </el-select> <div style="margin-top: 16px"> <el-button size="small" @click="popVisible = true">代码打开弹窗</el-button> <el-button size="small" @click="popVisible = false">代码关闭弹窗</el-button> <el-button size="small" @click="selectedList = ['vue', 'go']">代码默认选中两项</el-button> </div> <p style="margin-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把用户手动开合的状态同步回来，否则会 “点不开 / 关不掉”
