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

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

‍ 作者：全栈老李

更新时间：2025 年 5 月

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

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

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

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

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

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

基础结构搭建

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

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

<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'