AiCustomSelect 远程搜索选择器

基于 Naive UI n-select 封装的下拉选择器，支持远程搜索、本地/远程数据加载、单选/多选。

基本用法

<template>
  <AiCustomSelect
    v-model:value="selectedValue"
    api="/system/user/list"
    label-field="userName"
    value-field="userId"
  />
</template>

<script setup>
import { AiCustomSelect } from '@/components/ai-form'
import { ref } from 'vue'

const selectedValue = ref(null)
</script>

远程搜索模式

<AiCustomSelect
  v-model:value="user"
  api="/system/user/search"
  method="post"
  remote
  label-field="nickname"
  value-field="id"
  :params="{ status: 1 }"
/>

Props

属性	类型	默认值	说明
value	String | Number | Array	null	当前选中值，支持 v-model:value
api	String	''	远程数据接口地址，如 /system/user/list
method	String	'get'	请求方法，get 或 post
labelField	String	'label'	响应数据中作为显示文本的字段
valueField	String	'value'	响应数据中作为值标识的字段
options	Array	[]	静态选项数据（非远程模式直接使用）
params	Object	{}	附加请求参数
remote	Boolean	false	是否启用远程搜索模式，每次输入触发 API 请求
multiple	Boolean	false	是否开启多选
disabled	Boolean	false	是否禁用
clearable	Boolean	true	是否可清空
filterable	Boolean	true	是否可搜索/筛选
placeholder	String	'请选择'	占位文本
transform	Function	null	数据转换函数，用于将 API 原始响应转为 { label, value } 格式

透传所有 n-select 支持的属性（通过 v-bind="$attrs"）。

Events

事件名	参数	说明
update:value	(newValue)	选中值变化，支持 v-model:value
change	(value, selectedItem)	选中值变化时触发。多选时 selectedItem 为匹配选项数组，单选时为单个选项对象

Expose 方法

方法名	签名	说明
loadData	(searchQuery?: string) => Promise<void>	从 API 加载数据，可选搜索关键词
refresh	(searchQuery?: string) => Promise<void>	loadData 的别名

数据格式

API 需返回包含 labelField 和 valueField 所指定字段的数组。若数据结构不标准，可使用 transform 转换：

<AiCustomSelect
  api="/system/user/list"
  :transform="(list) => list.map(u => ({ label: u.nickname, value: u.userId }))"
/>