ApiSelect 搜索选择器

基于 antd Select 封装的搜索选择器组件，支持远程搜索和数据加载。

示例

基础用法

请选择用户

多选模式

 

请选择多个用户

自定义字段名：{label: 'username', value: 'userId'}

请选择用户

复制代码

查看代码

<template>
  <div class="demo-wrapper">
      <div class="demo-item">
        <h3>基础用法</h3>
        <s-api-select
          class="w-[300px]"
          v-model:value="value"
          :fetch-func="fetchData"
          placeholder="请选择用户"
          :search="{key: 'userName'}"
          allow-clear
        />
      </div>

      <div class="demo-item">
        <h3>多选模式</h3>
        <s-api-select
          v-model:value="multipleValue"
          :fetch-func="fetchData"
          placeholder="请选择多个用户"
          mode="multiple"
          :search="{key: 'userName'}"
          allow-clear
          class="w-[300px]"
        />
      </div>

      <div class="demo-item">
        <h3>自定义字段名:label: 'username', value: 'userId'</h3>
        <s-api-select
          v-model:value="customValue"
          :fetch-func="fetchData"
          :field-names="{ label: 'username', value: 'userId' }"
          placeholder="请选择用户"
          show-search
          class="w-[300px]"
          allow-clear
        />
      </div>
    </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'

// 单选值
const value = ref()

// 多选值
const multipleValue = ref<string[]>([])

// 自定义字段值
const customValue = ref<string>()

// 模拟接口请求
const fetchData1 = async (params: any) => {
  const searchVal = params['userName'];
  // 模拟接口延迟
  await new Promise((resolve) => setTimeout(resolve, 500));

  const list = Array.from({ length: 10 }, (_, index) => ({
    id: `${index + 1}`,
    name: `用户${index + 1}`,
    username: `user${index + 1}`,
    userId: `U${index + 1}`,
  }));

  // 模拟搜索过滤
  const filteredList = searchVal
    ? list.filter(
        (item) =>
          item.name.includes(searchVal)
      )
    : list;

  return {
    success: true,
    data: filteredList
  };
};

// 模拟接口请求
const fetchData2 = async () => {
  // 模拟接口延迟
  await new Promise((resolve) => setTimeout(resolve, 500));

  const list = Array.from({ length: 10 }, (_, index) => ({
    id: `${index + 1}`,
    name: `用户${index + 1}`,
    username: `user${index + 1}`,
    userId: `U${index + 1}`,
  }));

  return {
    success: true,
    data: list
  };
};
</script>
<style scoped lang="less">
.demo-wrapper {
  width: 100%;
}

.demo-item {
  margin-bottom: 24px;

  h3 {
    margin-bottom: 16px;
    font-size: 16px;
    font-weight: 500;
  }
}
</style>

API

属性

属性名	说明	类型	默认值
value	当前选中的值	string | string[]	-
fetchFunc	获取选项数据的函数	(params:any) => Promise<any>	-
fieldNames	自定义字段名	{ label: string, value: string }	{ label: 'name', value: 'id' }
fetchOptions	请求配置	{ params?: Record<string, any>, afterRes?: Function }	-
mode	设置 Select 的模式(multiple为多选)	'multiple'	-
search	搜索配置(开启后会携带搜索字段到请求中)	{key: string}	-
placeholder	选择框默认文本	string	'请选择'

事件

事件名	说明	回调参数
update:value	选中值变化时触发	(value: string | string[], option: any)

插槽

插槽名	说明
notFoundContent	当下拉列表为空时显示的内容

注意事项

1. fetchFunc 函数需要返回符合以下格式的数据：

{
  success: boolean;
  data: {
    data: Array<{
      [key: string]: any;
    }>;
  };
}

2. 如果后端返回的数据格式与默认格式不一致，可以通过 fetchOptions.afterRes 进行转换：

{
  fetchOptions: {
    afterRes: (res) => {
      // 转换数据格式
      return res.map(item => ({
        name: item.label,
        id: item.value
      }))
    }
  }
}

3. 可以通过 fieldNames 自定义选项的标签和值的字段名：

{
  fieldNames: {
    label: 'username',  // 显示的文本字段
    value: 'userId'     // 选项的值字段
  }
}