本文共 2070 字，大约阅读时间需要 6 分钟。

Ant Design Select 组件自定义实现

基于 Ant Design 的 Select 组件，结合 Remote搜索、分页技术，以及自定义样式实现的增强版本。

功能特点

支持多选/单选模式，提供搜索功能，同时支持分页加载和 Debounce 防抖技术，适用于需要动态加载数据场景。

组件结构

应用了 React 巧用状态管理与 Effect Hook，搭配 Ant Design Select 组件实现自定义功能。

Core Component 组成部分

功能模块

搜索与 Debounce 加载

• 在输入框输入内容时，触发搜索回调
• 使用 react-use 库进行 Debounce，防止频繁的重复请求
• 处理搜索结果数据，更新列表

数据获取与分页处理

• 通过 axios 进行 HTTP 请求
• 分页参数包含 current 和 pageSize
• 根据返回数据，判断是否需要滚动分页
• 合并历史数据或新加载数据，更新列表

作用域及事件处理

默认接收 props 并进行处理，按需传递参数

• handleList 外部处理数据
• onClear 清除搜索内容
• handleSearch 搜索触发
• onPopupScroll 滚动触发分页

应用场景

CSS样式

.custom-select {
  .ant-select-selection-item {
    height: auto;
  }
  .ant-select-item-option-selected:not(.ant-select-item-option-disabled) .ant-select-item-option-content {
    padding-right: 0;
  }
  .ant-select-dropdown {
    width: auto !important;
    .label-key {
      max-width: 200px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .select-top-title {
      display: flex;
      justify-content: space-between;
      .top-label-key {
        float: left;
        max-width: 200px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
      .right-label-key {
        float: right;
        color: #8593a5;
        font-size: 12px;
        margin-left: 10px;
        max-width: 100px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
    }
    .bottom-label-key {
      color: #8593a5;
      font-size: 12px;
      max-width: 240px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
  }
}

本实现主要目标是优化 Select 组件的可用性，适合需要动态加载和分页场景，同时提供细化的样式调整点。