第7节：多选模式、自定义选项渲染、受控弹窗显隐

第7节：多选模式、自定义选项渲染、受控弹窗显隐

本节讲三个高频进阶点：多选标签、弹窗里自定义选项长什么样、用代码主动打开 / 关闭下拉弹窗。

核心知识点

1. multiple：开启多选，选中项以 tag 标签形式展示
2. collapse-tags：多选时折叠标签，只显示第一个 + "+N"
3. el-option 默认插槽：自定义每一项的渲染内容（图标、状态、描述文字）
4. 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>

测试要点

1. 点开下拉，每个选项是自定义渲染：左侧彩色圆点 + 名称 + 灰色描述文字
2. 多选几个选项，输入框里标签折叠成 "第一个 + 2"，鼠标悬停 +2 能看到完整标签（collapse-tags-tooltip）
3. 点 "代码打开弹窗" 按钮，弹窗自动弹出；点 "代码关闭弹窗" 自动收起
4. 点 "代码默认选中两项"，selectedList 被赋值，输入框同步显示对应标签

业务坑提醒

• 自定义选项渲染时，label 必须保留：它负责选中后输入框显示的文字和搜索匹配，插槽只改弹窗里的长相
• v-model:visible 受控后，一定要监听 @visible-change 把用户手动开合的状态同步回来，否则会 "点不开 / 关不掉"