QueryForm
查询表单组件，基于 FormGrid + Submit/Reset 实现折叠展开
提示
- 在
QueryForm中默认:fullness="true"，可以通过传入 Form 的属性覆盖。 QueryForm与QueryForm.Light默认自动注册常用输入组件及FormItem，大多数 JSON Schema 场景无需手动传入components。
注意
由于本组件默认注册了几乎所有的输入组件，会导致树摇失败，使用前需确认对包的体积不敏感。目前没有注册的输入组件有： DatePickerPanel、Upload、ColorPickerPanel 、SelectTable、Transfer、Mention、Tree。另外由于Segmented、InputTag所需要的版本号相对较高，暂时没有注册，防止注册阶段报错。
Markup Schema 案例
提示
配置跨列需使用@formily/grid的data-grid-span属性
<script setup lang="ts">
import { createForm } from '@formily/core'
import {
DatePicker,
FormItem,
Input,
QueryForm,
Select,
} from '@silver-formily/element-plus'
import { createSchemaField, FormProvider } from '@silver-formily/vue'
import { ElMessage } from 'element-plus'
const form = createForm()
const { SchemaField, SchemaVoidField, SchemaStringField } = createSchemaField({
components: {
QueryForm,
Input,
Select,
DatePicker,
FormItem,
},
})
async function handleAutoSubmit(values: any) {
ElMessage.success(`自动提交: ${JSON.stringify(values)}`)
}
</script>
<template>
<FormProvider :form="form">
<SchemaField>
<SchemaVoidField
x-component="QueryForm"
:x-component-props="{
onAutoSubmit: handleAutoSubmit,
gridProps: {
breakpoints: [900, Infinity],
maxColumns: [3, 4],
},
}"
>
<SchemaStringField
name="input1"
title="Input 1"
x-component="Input"
x-decorator="FormItem"
/>
<SchemaStringField
name="input2"
title="Input 2"
x-component="Input"
x-decorator="FormItem"
/>
<SchemaStringField
name="select1"
title="Select 1"
x-component="Select"
x-decorator="FormItem"
/>
<SchemaStringField
name="select2"
title="Select 2"
x-component="Select"
x-decorator="FormItem"
/>
<SchemaStringField
name="dateRange"
title="DatePicker"
x-component="DatePicker"
x-decorator="FormItem"
:x-decorator-props="{
'data-grid-span': 2,
}"
:x-component-props="{
type: 'daterange',
}"
/>
<SchemaStringField
name="select3"
title="Select 3"
x-component="Select"
x-decorator="FormItem"
/>
</SchemaVoidField>
</SchemaField>
</FormProvider>
</template>查看源码
JSON Schema 案例
<script setup lang="ts">
import type { ISchema } from '@formily/json-schema'
import { createForm } from '@formily/core'
import { QueryForm } from '@silver-formily/element-plus'
import { ElMessage } from 'element-plus'
const form = createForm()
const schema: ISchema = {
type: 'object',
properties: {
input1: {
'type': 'string',
'title': 'Input 1',
'x-decorator': 'FormItem',
'x-component': 'Input',
},
input2: {
'type': 'string',
'title': 'Input 2',
'x-decorator': 'FormItem',
'x-component': 'Input',
},
},
}
async function handleAutoSubmit(values: any) {
ElMessage.success(`自动提交: ${JSON.stringify(values)}`)
}
</script>
<template>
<QueryForm
:form="form"
:schema="schema"
:grid-props="{ breakpoints: [900, Infinity], maxColumns: [3, 4] }"
@auto-submit="handleAutoSubmit"
/>
</template>查看源码
通过传入 form 设置初始值
<script setup lang="ts">
import type { ISchema } from '@formily/json-schema'
import { createForm } from '@formily/core'
import { QueryForm } from '@silver-formily/element-plus'
import { ElMessage } from 'element-plus'
const form = createForm({
initialValues: {
keyword: '订单',
status: 'enabled',
creator: 'Tony',
},
})
const schema: ISchema = {
type: 'object',
properties: {
keyword: {
'type': 'string',
'title': '关键词',
'x-decorator': 'FormItem',
'x-component': 'Input',
'x-component-props': {
placeholder: '请输入关键词',
},
},
status: {
'type': 'string',
'title': '状态',
'x-decorator': 'FormItem',
'x-component': 'Select',
'x-component-props': {
placeholder: '请选择',
},
'enum': [
{ label: '启用', value: 'enabled' },
{ label: '停用', value: 'disabled' },
],
},
creator: {
'type': 'string',
'title': '创建人',
'x-decorator': 'FormItem',
'x-component': 'Input',
'x-component-props': {
placeholder: '请输入创建人',
},
},
},
}
async function handleAutoSubmit(values: any) {
ElMessage.success(`提交数据: ${JSON.stringify(values)}`)
}
</script>
<template>
<QueryForm
:form="form"
:schema="schema"
:show-toggle="false"
reset-text="恢复初始值"
@auto-submit="handleAutoSubmit"
/>
</template>查看源码
垂直布局示例
<script setup lang="ts">
import type { ISchema } from '@formily/json-schema'
import { createForm } from '@formily/core'
import { QueryForm } from '@silver-formily/element-plus'
const form = createForm()
const schema: ISchema = {
type: 'object',
properties: {
keyword: {
'type': 'string',
'title': 'Keyword',
'x-decorator': 'FormItem',
'x-component': 'Input',
},
status: {
'type': 'string',
'title': 'Status',
'x-decorator': 'FormItem',
'x-component': 'Select',
'enum': [
{ label: 'Enabled', value: 'enabled' },
{ label: 'Disabled', value: 'disabled' },
],
},
owner: {
'type': 'string',
'title': 'Owner',
'x-decorator': 'FormItem',
'x-component': 'Input',
},
department: {
'type': 'string',
'title': 'Department',
'x-decorator': 'FormItem',
'x-component': 'Input',
},
priority: {
'type': 'string',
'title': 'Priority',
'x-decorator': 'FormItem',
'x-component': 'Select',
'enum': [
{ label: 'High', value: 'high' },
{ label: 'Medium', value: 'medium' },
{ label: 'Low', value: 'low' },
],
},
source: {
'type': 'string',
'title': 'Source',
'x-decorator': 'FormItem',
'x-component': 'Select',
'enum': [
{ label: 'Web', value: 'web' },
{ label: 'App', value: 'app' },
],
},
createdAt: {
'type': 'string',
'title': 'Created At',
'x-decorator': 'FormItem',
'x-component': 'DatePicker',
'x-component-props': {
type: 'daterange',
},
},
updatedAt: {
'type': 'string',
'title': 'Updated At',
'x-decorator': 'FormItem',
'x-component': 'DatePicker',
'x-component-props': {
type: 'daterange',
},
},
},
}
</script>
<template>
<QueryForm
:form="form"
:schema="schema"
layout="vertical"
:grid-props="{ breakpoints: [900, Infinity], minColumns: [3, 4], maxColumns: [3, 4] }"
/>
</template>查看源码
默认展开所有搜索项
<script setup lang="ts">
import type { ISchema } from '@formily/json-schema'
import { createForm } from '@formily/core'
import { QueryForm } from '@silver-formily/element-plus'
const form = createForm()
const schema: ISchema = {
type: 'object',
properties: {
keyword: {
'type': 'string',
'title': 'Keyword',
'x-decorator': 'FormItem',
'x-component': 'Input',
},
status: {
'type': 'string',
'title': 'Status',
'x-decorator': 'FormItem',
'x-component': 'Select',
'enum': [
{ label: 'Enabled', value: 'enabled' },
{ label: 'Disabled', value: 'disabled' },
],
},
owner: {
'type': 'string',
'title': 'Owner',
'x-decorator': 'FormItem',
'x-component': 'Input',
},
category: {
'type': 'string',
'title': 'Category',
'x-decorator': 'FormItem',
'x-component': 'Select',
'enum': [
{ label: 'A', value: 'A' },
{ label: 'B', value: 'B' },
],
},
region: {
'type': 'string',
'title': 'Region',
'x-decorator': 'FormItem',
'x-component': 'Input',
},
createdAt: {
'type': 'string',
'title': 'Created At',
'x-decorator': 'FormItem',
'x-component': 'DatePicker',
'x-component-props': {
type: 'daterange',
},
},
},
}
</script>
<template>
<QueryForm
:form="form"
:schema="schema"
:default-expanded="true"
:grid-props="{ breakpoints: [900, Infinity], maxColumns: [3, 4], maxWidth: 220 }"
/>
</template>查看源码
隐藏切换按钮并展示所有搜索项
<script setup lang="ts">
import type { ISchema } from '@formily/json-schema'
import { createForm } from '@formily/core'
import { QueryForm } from '@silver-formily/element-plus'
const form = createForm()
const schema: ISchema = {
type: 'object',
properties: {
keyword: {
'type': 'string',
'title': 'Keyword',
'x-decorator': 'FormItem',
'x-component': 'Input',
},
status: {
'type': 'string',
'title': 'Status',
'x-decorator': 'FormItem',
'x-component': 'Select',
'enum': [
{ label: 'Enabled', value: 'enabled' },
{ label: 'Disabled', value: 'disabled' },
],
},
owner: {
'type': 'string',
'title': 'Owner',
'x-decorator': 'FormItem',
'x-component': 'Input',
},
category: {
'type': 'string',
'title': 'Category',
'x-decorator': 'FormItem',
'x-component': 'Select',
'enum': [
{ label: 'A', value: 'A' },
{ label: 'B', value: 'B' },
],
},
region: {
'type': 'string',
'title': 'Region',
'x-decorator': 'FormItem',
'x-component': 'Input',
},
tag: {
'type': 'string',
'title': 'Tag',
'x-decorator': 'FormItem',
'x-component': 'Input',
},
},
}
</script>
<template>
<QueryForm
:form="form"
:schema="schema"
:default-expanded="true"
:show-toggle="false"
:grid-props="{ breakpoints: [900, Infinity], maxColumns: [3, 4], maxWidth: 220 }"
/>
</template>查看源码
Light 模式（值变更自动提交）
<script setup lang="ts">
import type { ISchema } from '@formily/json-schema'
import { createForm } from '@formily/core'
import { QueryForm, Segmented } from '@silver-formily/element-plus'
import { ElMessage } from 'element-plus'
const form = createForm()
const schema: ISchema = {
type: 'object',
properties: {
granularity: {
'type': 'string',
'x-decorator': 'FormItem',
'x-component': 'Segmented',
'enum': [
{ label: '按天', value: 'day' },
{ label: '按周', value: 'week' },
],
},
operationAt: {
'type': 'string',
'x-decorator': 'FormItem',
'x-component': 'DatePicker',
'x-component-props': {
type: 'daterange',
startPlaceholder: '操作开始时间',
endPlaceholder: '操作结束时间',
},
},
},
}
async function handleAutoSubmit(values: any) {
ElMessage.success(`自动查询: ${JSON.stringify(values)}`)
}
</script>
<template>
<QueryForm.Light
:form="form"
:schema="schema"
:throttle-wait="500"
:components="{ Segmented }"
@auto-submit="handleAutoSubmit"
/>
</template>查看源码
Light 模式（无节流实时提交）
提示
QueryForm.Light使用独立的 flex 紧凑布局，不使用 Grid 折叠逻辑，因此gridProps、visibleWhen、展开/收起相关配置在 Light 模式下不生效。Select组件在 Element-Plus 的2.5.0版本后不再提供默认宽度，在Light模式下需要手动添加宽度。如果需要更紧凑的布局可以考虑
Editable组件。
<script setup lang="ts">
import type { ISchema } from '@formily/json-schema'
import { createForm } from '@formily/core'
import { QueryForm } from '@silver-formily/element-plus'
import { ElMessage } from 'element-plus'
const form = createForm()
const schema: ISchema = {
type: 'object',
properties: {
keyword: {
'type': 'string',
'x-decorator': 'FormItem',
'x-component': 'Input',
'x-component-props': {
placeholder: '关键词',
},
},
status: {
'type': 'string',
'x-decorator': 'FormItem',
'x-component': 'Select',
'x-component-props': {
placeholder: '状态',
style: {
width: '80px',
},
},
'enum': [
{ label: '启用', value: 'enabled' },
{ label: '停用', value: 'disabled' },
],
},
},
}
async function handleAutoSubmit(values: any) {
ElMessage.info(`实时提交: ${JSON.stringify(values)}`)
}
</script>
<template>
<QueryForm.Light
:form="form"
:schema="schema"
:throttle-wait="0"
@auto-submit="handleAutoSubmit"
/>
</template>查看源码
操作区行尾对齐示例（操作按钮始终在尾部可减少展开收起时的定位闪动）
<script setup lang="ts">
import type { ISchema } from '@formily/json-schema'
import { createForm } from '@formily/core'
import { QueryForm } from '@silver-formily/element-plus'
import { ElMessage } from 'element-plus'
const form = createForm()
const schema: ISchema = {
type: 'object',
properties: {
keyword: {
'type': 'string',
'title': '关键词',
'x-decorator': 'FormItem',
'x-component': 'Input',
},
status: {
'type': 'string',
'title': '状态',
'x-decorator': 'FormItem',
'x-component': 'Select',
'enum': [
{ label: '启用', value: 'enabled' },
{ label: '停用', value: 'disabled' },
],
},
owner: {
'type': 'string',
'title': '负责人',
'x-decorator': 'FormItem',
'x-component': 'Input',
},
category: {
'type': 'string',
'title': '分类',
'x-decorator': 'FormItem',
'x-component': 'Select',
'enum': [
{ label: 'A 类', value: 'A' },
{ label: 'B 类', value: 'B' },
],
},
createdAt: {
'type': 'string',
'title': '创建时间',
'x-decorator': 'FormItem',
'x-component': 'DatePicker',
'x-component-props': {
type: 'daterange',
},
},
},
}
async function handleAutoSubmit(values: any) {
ElMessage.success(`自动提交: ${JSON.stringify(values)}`)
}
</script>
<template>
<QueryForm
:form="form"
:schema="schema"
:grid-props="{ breakpoints: [900, Infinity], maxColumns: [3, 4], maxWidth: 220 }"
actions-at-row-end
@auto-submit="handleAutoSubmit"
/>
</template>查看源码
插槽示例（在查询/重置后、展开前插入导出按钮）
提示
目前操作区仅支持占用网格布局中的一个网格，内容太多会导致换行。需要设置合理的断点值，保证交互区按钮的宽度足够显示。
<script setup lang="ts">
import type { ISchema } from '@formily/json-schema'
import { Download, RefreshRight, Search } from '@element-plus/icons-vue'
import { createForm } from '@formily/core'
import {
QueryForm,
Reset,
Submit,
} from '@silver-formily/element-plus'
import { ElButton, ElMessage } from 'element-plus'
const form = createForm()
const schema: ISchema = {
type: 'object',
properties: {
keyword: {
'type': 'string',
'title': '关键词',
'x-decorator': 'FormItem',
'x-component': 'Input',
},
status: {
'type': 'string',
'title': '状态',
'x-decorator': 'FormItem',
'x-component': 'Select',
'enum': [
{ label: '启用', value: 'enabled' },
{ label: '停用', value: 'disabled' },
],
},
owner: {
'type': 'string',
'title': '负责人',
'x-decorator': 'FormItem',
'x-component': 'Input',
},
category: {
'type': 'string',
'title': '分类',
'x-decorator': 'FormItem',
'x-component': 'Select',
'enum': [
{ label: 'A 类', value: 'A' },
{ label: 'B 类', value: 'B' },
],
},
operationAt: {
'type': 'string',
'title': '操作时间',
'x-decorator': 'FormItem',
'x-component': 'DatePicker',
'x-component-props': {
type: 'daterange',
},
},
},
}
function onExport() {
ElMessage.success('导出中...')
}
async function handleAutoSubmit(values: any) {
ElMessage.success(`自动提交: ${JSON.stringify(values)}`)
}
</script>
<template>
<QueryForm
:form="form"
:schema="schema"
:grid-props="{ breakpoints: [1075, 1410, Infinity], maxColumns: [2, 3, 4] }"
@auto-submit="handleAutoSubmit"
>
<template #actions>
<Submit :icon="Search">
查询
</Submit>
<Reset :icon="RefreshRight">
重置
</Reset>
<ElButton :icon="Download" @click="onExport">
导出
</ElButton>
</template>
</QueryForm>
</template>查看源码
visibleWhen 示例（按字段名）
<script setup lang="ts">
import type { ISchema } from '@formily/json-schema'
import { createForm } from '@formily/core'
import { QueryForm } from '@silver-formily/element-plus'
import { ElMessage } from 'element-plus'
const form = createForm()
const schema: ISchema = {
type: 'object',
properties: {
owner: {
'type': 'string',
'title': '负责人',
'x-decorator': 'FormItem',
'x-component': 'Input',
},
category: {
'type': 'string',
'title': '分类',
'x-decorator': 'FormItem',
'x-component': 'Select',
'x-component-props': {
placeholder: '请选择',
},
'enum': [
{ label: 'A 类', value: 'A' },
{ label: 'B 类', value: 'B' },
],
},
keyword: {
'type': 'string',
'title': '关键词',
'x-decorator': 'FormItem',
'x-component': 'Input',
},
status: {
'type': 'string',
'title': '状态',
'x-decorator': 'FormItem',
'x-component': 'Select',
'x-component-props': {
placeholder: '请选择',
},
'enum': [
{ label: '启用', value: 'enabled' },
{ label: '停用', value: 'disabled' },
],
},
createdAt: {
'type': 'string',
'title': '创建时间',
'x-decorator': 'FormItem',
'x-component': 'DatePicker',
'x-component-props': {
type: 'daterange',
startPlaceholder: '开始时间',
endPlaceholder: '结束时间',
},
},
remark: {
'type': 'string',
'title': '备注',
'x-decorator': 'FormItem',
'x-component': 'Input',
},
},
}
async function handleAutoSubmit(values: any) {
ElMessage.success(`自动提交: ${JSON.stringify(values)}`)
}
</script>
<template>
<QueryForm
:form="form"
:schema="schema"
:grid-props="{ breakpoints: [900, Infinity], maxColumns: [3, 4], maxWidth: 240 }"
:visible-when="(context) => {
if (!context.collapsed)
return true
const name = context.field?.address?.toString() ?? ''
const primary = ['keyword', 'status']
if (primary.includes(name))
return true
return false
}"
@auto-submit="handleAutoSubmit"
/>
</template>查看源码
visibleWhen 示例（默认折叠显示前两行）
<script setup lang="ts">
import type { ISchema } from '@formily/json-schema'
import { createForm } from '@formily/core'
import { QueryForm } from '@silver-formily/element-plus'
import { ElMessage } from 'element-plus'
const form = createForm()
const schema: ISchema = {
type: 'object',
properties: {
keyword: {
'type': 'string',
'title': '关键词',
'x-decorator': 'FormItem',
'x-component': 'Input',
},
status: {
'type': 'string',
'title': '状态',
'x-decorator': 'FormItem',
'x-component': 'Select',
'enum': [
{ label: '启用', value: 'enabled' },
{ label: '停用', value: 'disabled' },
],
},
owner: {
'type': 'string',
'title': '负责人',
'x-decorator': 'FormItem',
'x-component': 'Input',
},
category: {
'type': 'string',
'title': '分类',
'x-decorator': 'FormItem',
'x-component': 'Select',
'enum': [
{ label: 'A 类', value: 'A' },
{ label: 'B 类', value: 'B' },
],
},
department: {
'type': 'string',
'title': '部门',
'x-decorator': 'FormItem',
'x-component': 'Input',
},
priority: {
'type': 'string',
'title': '优先级',
'x-decorator': 'FormItem',
'x-component': 'Select',
'enum': [
{ label: '高', value: 'high' },
{ label: '中', value: 'medium' },
{ label: '低', value: 'low' },
],
},
createdAt: {
'type': 'string',
'title': '创建时间',
'x-decorator': 'FormItem',
'x-component': 'DatePicker',
'x-component-props': {
type: 'daterange',
startPlaceholder: '开始时间',
endPlaceholder: '结束时间',
},
},
updatedAt: {
'type': 'string',
'title': '更新时间',
'x-decorator': 'FormItem',
'x-component': 'DatePicker',
'x-component-props': {
type: 'daterange',
startPlaceholder: '开始时间',
endPlaceholder: '结束时间',
},
},
source: {
'type': 'string',
'title': '来源',
'x-decorator': 'FormItem',
'x-component': 'Select',
'enum': [
{ label: 'Web', value: 'web' },
{ label: 'App', value: 'app' },
],
},
region: {
'type': 'string',
'title': '地区',
'x-decorator': 'FormItem',
'x-component': 'Input',
},
tag: {
'type': 'string',
'title': '标签',
'x-decorator': 'FormItem',
'x-component': 'Input',
},
remark: {
'type': 'string',
'title': '备注',
'x-decorator': 'FormItem',
'x-component': 'Input',
},
},
}
async function handleAutoSubmit(values: any) {
ElMessage.success(`自动提交: ${JSON.stringify(values)}`)
}
</script>
<template>
<QueryForm
:form="form"
:schema="schema"
:grid-props="{ breakpoints: [900, Infinity], maxColumns: [3, 4], maxWidth: 240 }"
:visible-when="(context) => {
if (!context.collapsed)
return true
// shadowRow 从 1 开始计数，<= 2 表示保留前两行
return (context.node.shadowRow ?? 0) <= 2
}"
@auto-submit="handleAutoSubmit"
/>
</template>查看源码
visibleWhen 示例（默认折叠显示前 N 项）
<script setup lang="ts">
import type { ISchema } from '@formily/json-schema'
import { createForm } from '@formily/core'
import { QueryForm } from '@silver-formily/element-plus'
import { ElMessage } from 'element-plus'
const form = createForm()
const collapsedVisibleCount = 3
const schema: ISchema = {
type: 'object',
properties: {
keyword: {
'type': 'string',
'title': '关键词',
'x-decorator': 'FormItem',
'x-component': 'Input',
},
status: {
'type': 'string',
'title': '状态',
'x-decorator': 'FormItem',
'x-component': 'Select',
'enum': [
{ label: '启用', value: 'enabled' },
{ label: '停用', value: 'disabled' },
],
},
owner: {
'type': 'string',
'title': '负责人',
'x-decorator': 'FormItem',
'x-component': 'Input',
},
category: {
'type': 'string',
'title': '分类',
'x-decorator': 'FormItem',
'x-component': 'Select',
'enum': [
{ label: 'A 类', value: 'A' },
{ label: 'B 类', value: 'B' },
],
},
createdAt: {
'type': 'string',
'title': '创建时间',
'x-decorator': 'FormItem',
'x-component': 'DatePicker',
'x-component-props': {
type: 'daterange',
startPlaceholder: '开始时间',
endPlaceholder: '结束时间',
},
},
remark: {
'type': 'string',
'title': '备注',
'x-decorator': 'FormItem',
'x-component': 'Input',
},
},
}
async function handleAutoSubmit(values: any) {
ElMessage.success(`自动提交: ${JSON.stringify(values)}`)
}
</script>
<template>
<QueryForm
:form="form"
:schema="schema"
:grid-props="{ breakpoints: [900, Infinity], maxColumns: [3, 4], maxWidth: 240 }"
:visible-when="(context) => {
if (!context.collapsed)
return true
return context.index < collapsedVisibleCount
}"
@auto-submit="handleAutoSubmit"
/>
</template>查看源码
API
提示
QueryForm 与 QueryForm.Light 均会透传并继承 Form 的属性（如form、 layout、labelAlign、size 等，包括onAutoSubmit等事件）。在此不再列出
QueryForm Props
| 属性名 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| schema | JSON Schema 渲染 | ISchema | - |
| schemaField | 自定义 SchemaField | Component | - |
| components | JSON Schema 组件映射（会与内置映射合并，传入同名可覆盖） | Record<string, Component> | {} |
| gridProps | 创建 Grid 的参数（不包含 shouldVisible / maxRows） | Omit<IGridOptions, 'shouldVisible' | 'maxRows'> | {} |
| defaultExpanded | 初始是否展开 | boolean | false |
| showToggle | 是否显示展开/收起切换按钮（为 false 时始终展示全部搜索项） | boolean | true |
| actionsAtRowEnd | 操作区是否固定在行尾右侧显示 | boolean | false |
| visibleWhen | 字段可见性判断函数 | QueryFormVisibleContext | - |
| submitText | 提交按钮文字 | string | 查询 |
| resetText | 重置按钮文字 | string | 重置 |
| expandText | 展开按钮文字 | string | 展开 |
| collapseText | 收起按钮文字 | string | 收起 |
| showSubmit | 是否显示提交按钮 | boolean | true |
| showReset | 是否显示重置按钮 | boolean | true |
| submitProps | 透传给 Submit 的属性 | Record<string, any> | - |
| resetProps | 透传给 Reset 的属性 | Record<string, any> | - |
Slots
| 插槽名 | 说明 | Slot Props |
|---|---|---|
| default | 表单内容（Markup Schema 场景） | - |
| actions | 自定义操作按钮区域 | { expanded, toggle, type } |
| collapse | 自定义展开/收起按钮 | { expanded, toggle, type } |
提示
type 的可选值：'incomplete-wrap' | 'collapsible' | 'complete-wrap'。
QueryForm.Light Props
| 属性名 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| schema | JSON Schema 渲染 | ISchema | - |
| schemaField | 自定义 SchemaField | Component | - |
| components | JSON Schema 需注册组件（会与默认注册组件合并） | Record<string, Component> | 绝大部分（适合QueryForm的）输入组件 |
| throttleWait | 值变更自动提交的节流时间（毫秒） | number | 300 |
QueryForm.Light Slots
| 插槽名 | 说明 | Slot Props |
|---|---|---|
| default | 表单内容（Markup Schema 场景） | - |
提示
QueryForm.Light 不支持 actions / collapse 插槽，也不支持 Grid 折叠相关配置。
visibleWhen Context
QueryFormVisibleContext
ts
export interface QueryFormVisibleContext {
field?: GeneralField
schema?: ISchema
index: number
node: GridNode
grid: Grid<HTMLElement>
collapsed: boolean
breakpoint: number
}
export type QueryFormVisible = (context: QueryFormVisibleContext) => boolean