【高频考点精讲】手写下拉选择组件：从点击展开到搜索过滤，实现select的增强版

手写下拉选择组件：从点击展开到搜索过滤，实现select的增强版

🧑‍🏫 作者：全栈老李

📅 更新时间：2025 年 5 月

🧑‍💻 适合人群：前端初学者、进阶开发者

🚀 版权：本文由全栈老李原创，转载请注明出处。

今天咱们聊聊如何手写一个功能完善的下拉选择组件。相信不少前端er都用过Element UI或者Ant Design的Select组件，但你知道它们底层是怎么实现的吗？老李今天就带大家从零开始，实现一个支持点击展开、搜索过滤的增强版select组件。（全栈老李出品，转载请注明出处）

为什么需要手写下拉组件？

先问个问题：现成的UI库不香吗？香，但不够"香"。当产品经理拍着桌子说要一个"能搜索、能多选、还能显示复杂结构"的下拉框时，你会发现现成组件要么功能不够，要么样式难改。这时候手写一个才是王道。

上周我就遇到个需求：下拉选项要显示头像+姓名+职位，还要支持拼音搜索。现成组件搞不定？那就自己造轮子！

基础结构搭建

我们先从最简单的版本开始 - 一个能点击展开/收起的基础下拉框。核心思路其实很简单：

一个显示当前选中值的输入框
点击后显示选项列表
选择后更新显示值并收起列表

<!-- 全栈老李代码示例 -->
<div class="custom-select">
  <div class="select-input" @click="toggleDropdown">
    {
  
  { selectedOption || '请选择' }}
    <span class="arrow" :class="{ 'up': isOpen }">▼</span>
  </div>
  <ul class="dropdown-menu" v-show="isOpen">
    <li 
      v-for="option in options" 
      :key="option.value"
      @click="selectOption(option)"
    >
      {
  
  { option.label }}
    </li>
  </ul>
</div>

// 全栈老李代码示例
export default {
   
   
  data() {
   
   
    return {
   
   
      isOpen: false,
      selectedOption: '',
      options: [
        {
   
    value: '1', label: '选项1' },
        {