查询筛选

介绍

搜索查询栏组件

API

Props

参数名	描述	类型	默认值
status	默认状态，组件的状态	'default'|'hide'|'destroy'	'default'
showTitle	显示名称	boolean	true
title	名称	string	'页面名称'
leftExtraSlot	左侧插槽	boolean	false
showTooltip	显示说明文字	boolean	false
tooltip	说明文字	string	''
filtersSetting	筛选设置	boolean	false
storagePolicy	存储策略	'local'|'api'	'local'
saveSettingsApi	保存设置的 api，未设置为系统默认接口	string	'/api/system/pageTable/saveTableInfo'
querySettingsApi	查询设置的 api，未设置为系统默认接口	string	'/api/system/pageTable/fieldListQuery'
showFilter	筛选面板-开启	boolean	true
filterColumns	查询字段	Array<{ name: string }>	[{'name': 'name'}]
layout	布局方式	'horizontal' | 'vertical'	'horizontal'
customLayout	自定义布局	CustomLayout	{xs:24,sm:12,md:8,lg:8,xl:6,xxl:4}
expand	默认展开	boolean	true
defaultValues	默认值	Record<string, any>	-
showSimpleSearch	是否开启搜索框	boolean	true
searchColumns	查询字段	Array<{ name: string }>	[{'name': 'name'}]
showAdvanceFilter	开启高级筛选	boolean	true
advanceColumns	高级筛选查询字段	Array<{ name: string }>	[]
queryApi	筛选条件查询 api	string	'/api/system/schemeItem/list'
saveApi	筛选条件保存 api	string	'/api/system/schemeItem/save'
updateApi	筛选条件编辑 api	string	'/api/system/schemeItem/update'
deleteApi	筛选条件删除 api	string	'/api/system/schemeItem/remove'
baseStyle	自定义样式	string	-
customClass	类名绑定	string	-
uniqueId	唯一标识 , 组件的唯一标识	string	-
loop	循环数据 , 循环渲染设置	Loop	{}

Props 属性-筛选字段

参数名	描述	类型	默认值
title	标题	string	名称
name	数据字段	string	name
status	默认状态	'default'|'hidden'	名称
placeholder	占位提示	string	-
type	数据类型	'input'|'select'|'treeSelect'| 'inputNumber'|'date'|'time'	'input'
append	后置按钮，数据类型为输入框、下拉选择时生效	boolean	false
appendType	后置类型，数据类型为输入框、下拉选择时生效	'text'|'icon'	'text'
appendText	后置标签，数据类型为输入框、下拉选择时生效	string	-
appendIcon	后置图标，数据类型为输入框、下拉选择时生效	string	-
options	选项数据，数据类型为下拉选择、树选择时生效	Array<{key: string, value: string}>	-
fieldNames	指定字段名，数据类型为下拉选择、树选择时生效	{key:string, title:string}	{key:string,title:string}
optionFitWidth	下拉框宽度自适应，数据类型为下拉选择时生效	boolean	false
multiple	多选，数据类型为下拉选择、树选择时生效	boolean	false
maxTagCount	最大显示数量，数据类型为下拉选择、树选择时生效	number	-
allowSearch	可搜索，数据类型为下拉选择、树选择时生效	boolean	false
allowCreate	允许创建，数据类型为下拉选择时生效	boolean	false
filterOption	是否过滤选项，数据类型为下拉选择、树选择时生效	boolean	false
searchDelay	搜索事件延迟时间，数据类型为下拉选择时生效	string	'500'
loading	是否为加载状态，数据类型为下拉选择时生效	boolean	false
isVirtualList	开启虚拟列表，数据类型为树选择时生效	boolean	false
virtualListHeight	可视区域高度，数据类型为树选择时生效	number	200
checkable	复选框，数据类型为树选择时生效	boolean	false
checkedStrategy	选中回填方式，数据类型为树选择时生效	'all'|'parent'|'child'	'all'
filterTreeNode	过滤函数，数据类型为树选择时生效	function	-
isLoadMore	开启异步加载，数据类型为树选择时生效	function	-
precision	数字精度，数据类型为数字输入框时生效	number	-
min	最小值，数据类型为数字输入框时生效	number	-
max	最大值，数据类型为数字输入框时生效	number	-
dateType	选择器类型，数据类型为日期时生效	'date'|'week'|'month'|'quarter'|'year'	'date'
format	格式，数据类型为日期时生效	'YYYY-MM-DD'|'YYYY-MM-DD HH'|'YYYY-MM-DD HH:mm'|'YYYY-MM-DD HH:mm:ss'	'YYYY-MM-DD'
isRangeSelect	范围选择，数据类型为日期时生效	boolean	false
disabledDate	不可选取的时间，数据类型为日期时生效	function	false
format	格式，数据类型为时间时生效	'HH:mm:ss'|'HH:mm'|'HH'	'HH:mm:ss'
allowClear	允许清除	boolean	true
disabled	禁用	boolean	fasle
required	必填	boolean	false
requiredMsg	必填错误提示	string	-
customValidate	自定义校验	boolean	false
customValidateFunc	自定义函数	function	-

Events

事件名	描述	参数
onSearch	用户搜索事时件触发	ctx params: SearchParams loop: LoopParams
onReset	用户重置时事件触发	ctx params: { queryValues: {} } loop: LoopParams

Events-筛选字段事件配置

事件名	描述	参数
onChange	值改变时事件触发，数据类型为输入框、下拉选择、树选择、数字输入框、日期时生效	ctx params: { value: string } loop: LoopParams
onInput	用户输入时事件触发，数据类型为输入框时生效	ctx params: { value: string loop: LoopParams }
onClick	点击输入框时触发，数据类型为输入框时生效	ctx params: { value: string } loop: LoopParams
onClear	点击清除按钮时触发，数据类型为输入框时、下拉选择、树选择、数字输入框、日期生效	ctx params: [] loop: LoopParams
onClickAppend	点击后置按钮时，数据类型为输入框、下拉选择时生效	ctx params: { value: string } loop: LoopParams
onSearch	用户搜索时，数据类型为下拉选择、树选择时生效	ctx params: { value: string } loop: LoopParams
onPopupVisibleChange	下拉框显示状态改变时，数据类型为下拉选择、树选择时生效	ctx params: { value: string,visible:boolean } loop: LoopParams

Type

// 自定义布局配置
type CustomLayout = {
  xs: number, // < 576px 响应式栅格
  sm: number, // >= 576px 响应式栅格
  md: number, // >= 768px 响应式栅格
  lg: number, // >= 992px 响应式栅格
  xl: number, // >= 1200px 响应式栅格
  xxl: number, // >= 1600px 响应式栅格
};

// 查询参数
type SearchParams = {
  from: "search" | "advance", // 搜索类型 search:普通搜索，advance:高级搜索
  queryValues: Record<string, any>, // 查询参数
  searchType: "filterSearch" | "simpleSearch" | "advanceSearch", // 查询类型 filterSearch:筛选查询，simpleSearch:简单搜索，advanceSearch:高级搜索
};

// 循环变量数据参数
type LoopParams = {
  indexName: string,
  paramName: string,
  ref: ComputedRefImpl, // 全部的循环变量数据
  row: number,
  rowIndex: number,
}[];

// 循环
type Loop = {
  data: any[],
  paramName: string,
  indexName: string,
  key: string,
};