MelSelect ( 选择器 )

演示

使用 options 传递数据源

不用再写 <el-option> 循环了, 数据直接传给 options 即可

使用 optionsApi 传递请求数据源的方法

直接把请求数据源的方法传给 optionsApi, 组件会自动调用并渲染

使用 optionsApi 传递请求数据源的参数

可以给 optionsApi 传递对象, 以控制 是否立即发起请求、请求参数 等, 具体可参考 SelectOptionsApi 类型

筛选选项

通过 filterOptionMethod 传入方法对数据源选项进行筛选, 返回 false 则表示这个选项会被隐藏
· 方法第一个参数为启用 filterable 时的输入值, 若未启用则始终为 ''
· 方法第二个参数为当前筛选的选项数据

自定义渲染选项: 使用 options 传递 render

当数据源是在代码中定义时, 可以直接在 options 里传入 render 方法, 来自定义渲染选项
· 注意, 使用 render 时, 需要通过 <el-option> 渲染选项

自定义渲染选项: 使用 option 插槽

当数据源不是在代码中定义时, 可以使用 option 插槽, 来自定义渲染选项
· 注意, 使用 option 插槽时, 需要通过 <el-option> 渲染选项

自定义渲染选项内容: 使用 option-label 插槽

使用 option-label 插槽, 来自定义渲染选项内容 ( 仅内容部分, 而非整个选项 )

自定义渲染选项内容和标签: 使用 all-label 插槽

使用 all-label 插槽, 自定义渲染选项内容和标签
· 自定义渲染选项内容 ( 仅内容部分, 而非整个选项, 和 option-label 的作用一致 )
· 在未传入 label 插槽时代替 label 插槽来渲染标签

API

Props

参数名	描述	类型	默认值
options	选项数据源	MelSelectOption[]	-
optionsApi	请求数据源的方法	SelectOptionsApi	-
filterOptionMethod	对数据源选项进行筛选时执行的方法, 返回 false 则表示这个选项会被隐藏  - 方法第一个参数为启用 filterable 时的输入值, 若未启用则始终为 ''  - 方法第二个参数为当前筛选的选项数据	(query: string, option: MelSelectOption) => boolean | undefined	-
...	其它 el-select 属性均可使用	-	-

Expose

方法名	描述	类型
selectRef	Select 组件实例	SelectInstance
options	选项数据源	MelSelectOption[]
api	请求数据源的组合式函数实例	Reactive<UseRequestReturn>

Slots

名称	描述
option	自定义渲染选项
option-label	自定义渲染选项内容 ( 仅内容部分, 而非整个选项 )
all-label	自定义渲染选项内容和标签  - 自定义渲染选项内容 ( 仅内容部分, 而非整个选项, 和 option-label 的作用一致 )  - 在未传入 label 插槽时代替 label 插槽来渲染标签
...	其它 el-select 插槽均可使用

类型定义

SelectOptionsApi

export type SelectOptionsApi<T> = OptionsApiRequest<T> | SelectOptionsApiConfig<T>;

export interface SelectOptionsApiConfig<T> extends OptionsApiConfig<T> {
  /**
   * 远程搜索时的字段名
   *  - 当 `filterable: true` 和 `remote: true` 时可用
   *  - 定义后则会在搜索时将输入值作为该字段的值传入 `api` 方法并发起请求
   */
  remoteKey?: string;
}

export interface OptionsApiConfig<T> {
  /** 请求选项数据源的方法 */
  api?: OptionsApiRequest<T>;
  /**
   * 请求参数
   *  - 会传入 `api` 方法
   *  - 支持传入一个函数, 返回一个对象
   *  - 当请求参数发生变化时, 会重新发起请求
   */
  params?: MaybeRefOrGetter<Record<string, any> | undefined>;
  /**
   * 是否立即发起请求
   * @default true
   */
  immediate?: boolean;
}

export type OptionsApiRequest<T> = (...args: any[]) => Promise<
  T[] |
  {
    data: T[] |
      {
        data: T[];
      };
  }
>;