名称
说明
类型
默认值
全局配置
备注
v-model:value
选中的搜索值
-
-
-
-
v-model:errors
校验错误
{ index: number, message: string }
-
-
-
clearable
是否可清除
boolean
true
✅
-
clearIcon
清除图标
string | VNode | #clearIcon
close-circle
✅
-
customNameLabel
自定义搜索项名称下拉选择label
string | ((searchField: SearchField) => VNodeChild | #nameLabel
-
-
-
disabled
是否禁用
boolean
false
-
-
overlayContainer
自定义浮层容器节点
string | HTMLElement | (trigger?: Element) => string | HTMLElement
-
✅
-
placeholder
默认文本
string
-
-
-
searchFields
搜索选项
SearchField[]
-
-
用于配置支持那些搜索条件
size
尺寸
'md' | 'sm'
'md'
✅
-
onChange
搜索条件改变之后的回调
(value: searchValue[] | undefined, oldValue: searchValue[] | undefined) => void
-
-
-
onClear
清除搜索条件的回调
() => void
-
-
-
onItemRemove
搜索条件删除时的回调
(item: SearchValue) => void
-
-
-
onItemConfirm
搜索条件确认时触发的回调
(item: SearchItemConfirmContext) => void
-
-
-
onItemCreate
搜索条件创建时触发的回调
(item: SearchItemCreateContext) => void
-
-
-
onSearch
搜索按钮触发的回调
(value: searchValue[] | undefined) => void
-
-
-
onFocus
获取焦点后的回调
(evt: FocusEvent) => void
-
-
-
onBlur
失去焦点后的回调
(evt: FocusEvent) => void
-
-
-
名称
说明
参数类型
备注
blur
移除焦点
-
-
focus
获取焦点
(options?: FocusOptions) => void
-
名称
说明
参数类型
备注
clearIcon
清除图标
-
-
shortcuts
快捷面板快捷栏
SearchField[]
参数为默认可支持快捷创建搜索项的field数组
shortcut
快捷标签
SearchField
自定义单个快捷标签
shortcutLabel
快捷标签文字
SearchField
自定义单个快捷标签文字
shortcutIcon
快捷标签图标
SearchField
自定义单个快捷标签图标
interface SearchValue < V = unknown > {
key : VKey // 对应SearchData的key
name ?: string // 对应SearchField的label
value : V // 搜索值
operator ?: string // 搜索操作符
}
interface SearchItemConfirmContext < V = unknown > extends Partial < SearchValue < V > > {
nameInput ?: string // 搜索字段名称输入
operatorInput ?: string // 操作符输入
valueInput ?: string // 值输入
removed : boolean // 是否被移除
}
interface SearchItemCreateContext < V = unknown > extends Partial < SearchValue < V > > {
nameInput ?: string // 搜索字段名称输入
}
SearchField
根据 type
字段不同区分不通的搜索条件类型,除去共同包含的配置之外,分别有不同的配置项
基础配置
名称
说明
类型
默认值
全局配置
备注
key
唯一的key
VKey
-
-
必填
label
搜索条件的词条名称
string
-
-
必填
multiple
是否允许重复
boolean
-
-
为 true
时,该搜索条件可以被输入多次
quickSelect
是否在快捷面板中展示
boolean | SearchFieldQuickSelect
-
-
是否启用快捷面板, multiple
的搜索项该配置不生效。
keywordFallback
在搜索项名称输入过滤结果为空时支持以该搜索项进行搜索
boolean
-
-
-
operators
搜索条件的中间操作符
string[]
-
-
提供时,会在搜索词条名称中间增加一个操作符,如 '='
, '!='
defaultOperator
默认的操作符
string
-
-
提供时,会自动填入默认的操作符
defaultValue
默认值
-
-
-
提供时,会自动填入默认值
customOperatorLabel
自定义操作符下拉选择label
string | ((operator: string) => VNodeChild)
-
-
-
inputClassName
输入框class
string
-
-
用于自定义输入框样式
containerClassName
面板所在容器class
string
-
-
用于自定义浮层样式或快捷面板容器样式
placeholder
输入框placeholder
string
-
-
搜索值输入框的占位符
operatorPlaceholder
操作符输入框placeholder
string
-
-
搜索值操作符输入框的占位符
validator
搜索项校验函数
`(value: SearchValue) => { message?: string }
undefined`
-
-
onPanelVisibleChange
面板
(visible: boolean) => void
-
-
面板的展开与隐藏状态改变的回调函数
interface SearchFieldQuickSelect {
searchable : boolean // 是否开启搜索功能
}
普通输入类型
名称
说明
类型
默认值
全局配置
备注
type
类型
'input'
-
-
固定为 'input'
fieldConfig
配置
{ trim?: boolean }
-
-
-
下拉选择类型
名称
说明
类型
默认值
全局配置
备注
type
类型
'select'
-
-
固定为 'select'
fieldConfig
配置
SelectSearchFieldConfig
-
-
-
SelectSearchFieldConfig
名称
说明
类型
默认值
全局配置
备注
dataSource
类型
SelectPanelData[]
-
-
继承自SelectData
,但key
和label
为必填,不支持可配,详情参考Select
multiple
是否为多选
boolean
-
-
默认为单选
searchable
是否支持筛选
boolean
false
-
默认不支持
searchFn
搜索函数
(data: SelectPanelData, searchText: string) => boolean
-
-
默认模糊匹配
separator
多选分隔符
string
`'
'`
-
showSelectAll
是否支持全选
boolean
true
-
-
virtual
是否支持虚拟滚动
boolean
false
-
默认不支持
onSearch
搜索回调函数
`(searchValue: string) => void
((searchValue: string) => void)[]`
-
-
注:使用 Ctrl + Enter
在多选下切换面板中选项选中状态
type SelectPanelData = Required < Pick < SelectData , 'key' | 'label' > > & SelectData
树选择类型
名称
说明
类型
默认值
全局配置
备注
type
类型
'treeSelect'
-
-
固定为 'select'
fieldConfig
配置
TreeSelectSearchFieldConfig
-
-
-
TreeSelectSearchFieldConfig
名称
说明
类型
默认值
全局配置
备注
dataSource
类型
TreeSelectPanelData[]
-
-
继承自TreeSelectNode
,但key
和label
为必填,不支持可配,且childrenKey
固定为'children'
,详情参考Tree
multiple
是否为多选
boolean
-
-
默认为单选
checkable
是否可勾选
boolean
-
-
默认不可勾选
cascaderStrategy
级联策略
CascaderStrategy
-
-
详情参考Tree
draggable
是否可拖拽
boolean
-
-
详情参考Tree
draggableIcon
拖拽图标
string
-
-
详情参考Tree
customDraggableIcon
拖拽图标自定义渲染
string | () => VNodeChild
-
-
值为string时为对应名称的插槽
expandIcon
展开收起图标
string | TreeExpandIconRenderer | [string, string]
-
-
详情参考Tree
defaultExpandedKeys
默认展开的节点Key
VKey[]
-
-
-
customExpandIcon
展开收起图标自定义渲染
string | TreeExpandIconRenderer
-
-
值为string时为对应名称的插槽
showLine
是否展示连线
boolean
-
-
详情参考Tree
searchable
是否支持筛选
boolean
false
-
默认不支持
searchFn
搜索函数
(node: TreeSelectPanelData, searchValue?: string) => boolean
-
-
默认模糊匹配
separator
多选分隔符
string
`'
'`
-
virtual
是否支持虚拟滚动
boolean
false
-
默认不支持
onCheck
勾选回调函数
((checked: boolean, node: TreeSelectPanelData) => void) | ((checked: boolean, node: TreeSelectPanelData) => void)[]
-
-
详情参考Tree
onDragstart
dragstart
触发时调用
((options: TreeDragDropOptions<any>) => void) | ((options: TreeDragDropOptions<any>) => void)[]
-
-
详情参考Tree
onDragend
dragend
触发时调用
((options: TreeDragDropOptions<any>) => void) | ((options: TreeDragDropOptions<any>) => void)[]
-
-
详情参考Tree
onDragenter
dragenter
触发时调用
((options: TreeDragDropOptions<any>) => void | ((options: TreeDragDropOptions<any>) => void)[]
-
-
详情参考Tree
onDragleave
dragleave
触发时调用
((options: TreeDragDropOptions<any>) => void) | ((options: TreeDragDropOptions<any>) => void)[]
-
-
详情参考Tree
onDragover
dragover
触发时调用
((options: TreeDragDropOptions<any>) => void) | ((options: TreeDragDropOptions<any>) => void)[]
-
-
详情参考Tree
onDrop
drop
触发时调用
((options: TreeDragDropOptions<any>) => void) | ((options: TreeDragDropOptions<any>) => void)[]
-
-
详情参考Tree
onExpand
点击展开图标时触发
((expanded: boolean, node: TreeSelectPanelData) => void) | ((expanded: boolean, node: TreeSelectPanelData) => void)[]
-
-
详情参考Tree
onSelect
选中状态发生变化时触发
((selected: boolean, node: TreeSelectPanelData) => void) | ((selected: boolean, node: TreeSelectPanelData) => void)[]
-
-
详情参考Tree
onSearch
搜索回调函数
((searchValue: string) => void) | ((searchValue: string) => void)[]
-
-
在触发搜索值改变时执行
onLoaded
子节点加载完毕时触发
((loadedKeys: any[], node: TreeSelectPanelData) => void) | ((loadedKeys: any[], node: TreeSelectPanelData) => void)[]
-
-
详情参考Tree
type TreeExpandIconRenderer = ( data : { key : VKey ; expanded : boolean ; node : TreeNode < any > } ) => VNodeChild | string
type TreeSelectPanelData = TreeSelectNode &
Required < Pick < TreeSelectNode , 'key' | 'label' > > & {
children ?: TreeSelectPanelData [ ]
}
级联选择类型
名称
说明
类型
默认值
全局配置
备注
type
类型
'cascader'
-
-
固定为 'cascader'
fieldConfig
配置
'CascaderSearchFieldConfig'
-
-
-
CascaderSearchFieldConfig
名称
说明
类型
默认值
全局配置
备注
dataSource
类型
CascaderPanelData[]
-
-
继承自CascaderData
,但key
和label
为必填,不支持可配,且childrenKey
固定为'children'
,详情参考Cascader
cascaderStrategy
级联策略
CascaderStrategy
''
-
详情参考Cascader
multiple
是否为多选
boolean
-
-
默认为单选
disableData
动态禁用某些项
(data: CascaderPanelData) => boolean
-
-
详情参考Cascader
expandIcon
展开图标
string
-
-
详情参考Cascader
customExpandIcon
展开收起图标自定义渲染
string | (options: { key: VKey, expanded: boolean, data: CascaderPanelData }) => VNodeChild
-
-
值为string时为对应名称的插槽
expandTrigger
触发展开的方式
``'click' | 'hover'`
-
-
详情参考Cascader
fullPath
选中后的值是否包含全部路径
boolean
-
false
详情参考Cascader
pathSeparator
设置分割符
string
-
-
详情参考Cascader
searchable
是否支持筛选
boolean
false
-
默认不支持
searchFn
搜索函数
(node: TreeSelectPanelData, searchValue?: string) => boolean
-
-
默认模糊匹配
separator
多选分隔符
string
`'
'`
-
virtual
是否支持虚拟滚动
boolean
false
-
默认不支持
onExpand
点击展开图标时触发
((expanded: boolean, data: CascaderPanelData) => void) | ((expanded: boolean, data: CascaderPanelData) => void>)[]
-
-
详情参考Cascader
onSearch
开启搜索功能后,输入后的回调
((searchValue: string) => void) | ((searchValue: string) => void)[]
-
-
详情参考Cascader
onLoaded
子节点加载完毕时触发
((loadedKeys: any[], node: TreeSelectPanelData) => void) | ((loadedKeys: any[], node: TreeSelectPanelData) => void)[]
-
-
详情参考Cascader
日期选择类型
名称
说明
类型
默认值
全局配置
备注
type
类型
'datePicker'
-
-
固定为 'datePicker'
fieldConfig
配置
'DatePickerSearchFieldConfig'
-
-
-
DatePickerSearchFieldConfig
名称
说明
类型
默认值
全局配置
备注
format
日期输入格式
'格式'
-
✅
详见DatePicker
type
日期选择类型
DatePickerType
'date'
-
同DatePicker
的type
, 详见DatePicker
cellTooltip
日期禁用的悬浮提示
`(cell: { value: Date, disabled: boolean}) => string
void`
-
-
disabledDate
日期禁用判断
(date: Date) => boolean
-
-
详见DatePicker
timePanelOptions
时间面板配置
TimePanelOptions
-
-
详见DatePicker
DateRangePickerSearchField
日期范围选择类型
名称
说明
类型
默认值
全局配置
备注
type
类型
'dateRangePicker'
-
-
固定为 'dateRangePicker'
fieldConfig
配置
'DateRangePickerSearchFieldConfig'
-
-
-
DateRangePickerSearchFieldConfig
名称
说明
类型
默认值
全局配置
备注
format
日期输入格式
'格式'
-
✅
详见DatePicker
separator
日期范围之间的分隔符
string
'~'
-
-
type
日期选择类型
DatePickerType
'date'
-
同DatePicker
的type
, 详见DatePicker
cellTooltip
日期禁用的悬浮提示
`(cell: { value: Date, disabled: boolean}) => string
void`
-
-
disabledDate
日期禁用判断
(date: Date) => boolean
-
-
详见DatePicker
timePanelOptions
时间面板配置
TimePanelOptions
-
-
详见DatePicker
自定义类型
名称
说明
类型
默认值
全局配置
备注
type
类型
'custom'
-
-
固定为 'custom'
fieldConfig
配置
CustomSearchFieldConfig
-
-
-
CustomSearchFieldConfig
名称
说明
类型
默认值
全局配置
备注
name
自定义的段名称
string
-
-
-
extends
继承已有的类型
string
-
-
上述所有的field类型
customPanel
自定义面板渲染
string | (context: PanelRenderContext) => VNodeChild
-
-
如果有面板则需要提供,类型为string
时指代插槽名称
format
数据格式化函数
(value: unknown) => string
-
-
必填,用于将指定的类型转换成字符串输入
parse
输入解析函数
`(input: string) => unknown
null`
-
-
placeholder
段占位符
string
-
-
-
visible
段显示隐藏控制
(states: SegmentState[]) => boolean
-
-
当前搜索项全部段的状态,返回true
或者false
控制段的显示隐藏
多段输入类型搜索项
名称
说明
类型
默认值
全局配置
备注
type
类型
'multiSegment'
-
-
固定为 'multiSegment'
fieldConfig
配置
{ segments: CustomSearchFieldConfig[] }
-
-
-
interface PanelRenderContext < V = unknown > {
input : string // 输入的字符串
value : V // 值
slots : Slots // 组件插槽
ok : ( ) => void // 确认
cancel : ( ) => void // 取消
setValue : ( value : V ) => void // 设置搜索值
setOnKeyDown : ( onKeyDown : ( ( evt : KeyboardEvent ) => boolean ) | undefined ) => void // 设置 `keydown` 回调函数
}
快捷标签组件,用于自定义快捷栏的展示,但仅可以在 IxProSearch
下使用。
名称
说明
类型
默认值
全局配置
备注
fieldKey
快捷标签对应的fieldKey
VKey
-
-
-
icon
快捷标签图标
string
-
-
默认为field中的icon
属性
名称
说明
参数类型
备注
default
快捷标签
SearchField
自定义单个快捷标签
label
快捷标签文字
SearchField
自定义单个快捷标签文字
icon
快捷标签图标
SearchField
自定义单个快捷标签图标