FSelectRemote 远程下拉选择

基于 Element Plus ElSelect 封装的普通远程下拉组件，支持关键词搜索、分页滚动加载、单选/多选、字段映射和统一请求配置。

基础用法

通过 request 传入公共 BaseRequestConfig。组件挂载后默认一次加载全部数据；配置 pagination 后加载第一页，输入关键词会重新搜索，滚动到底部自动加载下一页。设置 immediate: false 时可通过公开方法手动加载。

loading

在 FForm 中使用

const schemas = [
  {
    field: 'projectId',
    label: '项目',
    component: 'FSelectRemote',
    componentProps: {
      request: { api: fetchProjects },
      fieldNames: { label: 'name', value: 'id' },
      pagination: { pageSize: 20 },
      clearable: true,
    },
  },
]

请求约定

默认不分页，请求只传递非空的 keyword，接口可直接返回完整数组。pagination: true 开启滚动分页并使用默认每页 20 条；pagination: { pageSize: 10 } 可指定每页条数。分页时默认传递 pageNum、pageSize，可通过 paramsMap 修改参数名，通过 responseMap 指定列表和总数路径，并可使用 beforeRequest、afterResponse 转换请求与响应。

const request: BaseRequestConfig = {
  api: fetchProjects,
  paramsMap: {
    page: 'page',
    pageSize: 'limit',
    keyword: 'name',
  },
  responseMap: {
    list: 'data.rows',
    total: 'data.total',
  },
}

API

属性

参数	说明	类型	默认值
modelValue	选中值，支持单选或多选	any | any[]	—
request	公共请求配置	BaseRequestConfig	必填
pagination	分页滚动配置；true 使用默认每页条数，对象可指定每页条数，false 不分页	boolean | { pageSize?: number }	false
debounce	搜索防抖时间，单位毫秒	number	300
fieldNames	选项字段映射	{ label?, value?, disabled? }	标准字段名

继承 Element Plus ElSelect 的其他属性；remote、remoteMethod、filterable 和加载状态由组件内部控制，debounce 仅作用于远程请求，避免重复防抖。

事件

事件名	说明	参数
data-change	列表请求成功	{ list, total }
request-error	请求失败	error

插槽

插槽名	说明	参数
option	自定义选项内容	{ item }
其他 ElSelect 具名插槽	原样转发	与 Element Plus 一致

公开方法

方法	说明
fetchData(append?)	请求当前页
reload()	重置页码并重新加载
loadMore()	加载下一页
focus()	聚焦选择器
blur()	取消聚焦