PresetSelect 配置选择器
Demo
loading
Types
ts
export type ArrayAwareType<V, T> = V extends null ? null : (V extends any[] ? T[] : T) | null
export type OptionFormat<R extends DataObject = DataObject> = (row: R) => SelectOption | SelectGroupOption | false | undefined | null
export type PresetSelectValue = string | number | (string | number)[] | null
export type PresetSelectFields = DataRequestFields & {
label?: string
value?: string
rowKey?: string
search?: string
children?: string
}
export type PresetSelectExpose<P extends DataObject = DataObject, D extends DataObject = DataObject, R extends DataObject = DataObject> = UseDataRequestReturns<P, D, R> & {
selectRef: Readonly<ShallowRef<SelectInst | null>>
}
export type PresetSelectProps<V extends PresetSelectValue, P extends DataObject = DataObject, D extends DataObject = DataObject, R extends DataObject = DataObject> = RemoteRequestProps<P, D> & {
value?: V
fallbackLabel?: string | ((val: string | number) => SelectOption)
multiple?: boolean
disabled?: boolean
clearable?: boolean
debounce?: boolean | number
optionFormat?: OptionFormat<R>
fields?: PresetSelectFields
selectProps?: SelectProps & ClassStyle
pagination?: Omit<PaginationProps, 'page' | 'pageSize'> & ClassStyle | boolean
}
export type PresetSelectEmits<V extends PresetSelectValue, P extends DataObject = DataObject, D extends DataObject = DataObject, R extends DataObject = DataObject> = RemoteRequestEmits<P, D> & {
(e: 'blur', ev: FocusEvent): void
(e: 'clear'): void
(e: 'create', label: string): SelectOption
(e: 'focus', ev: FocusEvent): void
(e: 'scroll', ev: Event): void
(e: 'search', value: string): void
(e: 'update:value', val: V | null, option: SelectOption | SelectOption[] | null, raw: R | R[] | null): void
(e: 'update:page', page: number): void
(e: 'update:pageSize', pageSize: number): void
}Props
| Name | Type | Default | Description |
|---|---|---|---|
| api | (params:Object)=>Promise | - | 异步接口返回的数据的方法 |
| value | PresetSelectValue | - | 选择器的值 |
| fallbackLabel | String | - | 无数据时的占位符 |
| defaultParams | Object | - | 默认的参数 |
| manual | Boolean | - | 是否手动触发请求 |
| multiple | Boolean | - | 是否多选 |
| disabled | Boolean | - | 是否禁用 |
| debounce | Boolean or Number | - | 防抖时间 |
| optionFormat | OptionFormat | - | 选项格式化函数 |
| fields | Object | - | 内置参数的字段 |
| pagination | PaginationProps or Boolean | - | 数据表格的分页配置 |
| selectProps | SelectProps | - | 选择器的配置 |
| requestOptions | UseRequestOptions | - | VueHooks UseRequest 的请求配置 |
| requestPlugins | UseRequestPlugin[] | - | VueHooks UseRequest 的插件配置 |
Emits
| Name | Type | Description |
|---|---|---|
| before | (params: D[]) => void | 数据加载前 |
| success | (data: D, params: P[]) => void | 数据加载完成 |
| error | (error: Error, params: P[]) => void | 数据加载失败 |
| finally | params: (P[], data?: D, err?: Error) => void | 数据加载完成或失败 |
| update:value | (val: PresetSelectValue) => void | 值更新时 |
| update:page | (page: number) => void | 页码更新时 |
| update:pageSize | (pageSize: number) => void | 每页数量更新时 |