QueryFilter - 筛选表单

QueryFilter 是 Form 的一个变体，表现与 Form 相同。有些时候表单要与别的组件组合使用，就需要一些特殊形态的表单。QueryFilter 解决了配合组件使用的问题。 Table 中默认支持了 QueryFilter 作为筛选表单。

基本用法

显示代码

import { defineComponent, ref, unref, Fragment } from 'vue'
import { Number, QueryFilter, Select, Text } from '@/components/form'

export default defineComponent({
    setup () {
        const loading = ref(false)

        function onFinish (values) {
            console.log(values)
            loading.value = true
            setTimeout(() => {
                loading.value = false
            }, 1000)
        }

        return () => {
            return (
                <QueryFilter loading={unref(loading)} onFinish={onFinish}>
                    {(slotScope) => {
                        return [
                            <Text
                                label={'文本'}
                                name={'text'}
                                formItemProps={slotScope.props}
                            />,
                            <Number
                                label={'数字'}
                                name={'number'}
                                formItemProps={slotScope.props}
                            />,
                            <Select
                                label={'选择'}
                                name={'select'}
                                formItemProps={slotScope.props}
                            />
                        ]
                    }}
                </QueryFilter>
            )
        }
    }
})

可折叠的

显示代码

import { defineComponent, ref, unref } from 'vue'
import { Number, QueryFilter, Select, Text } from '@/components/form'

export default defineComponent({
    setup () {
        const loading = ref(false)

        function onFinish (values) {
            console.log(values)
            loading.value = true
            setTimeout(() => {
                loading.value = false
            }, 1000)
        }

        return () => {
            return (
                <QueryFilter showCollapse={true} loading={unref(loading)} onFinish={onFinish}>
                    {(slotScope) => {
                        return [
                            <Text
                                label={'文本'}
                                name={'text'}
                                formItemProps={slotScope.props}
                            />,
                            <Number
                                label={'数字'}
                                name={'number'}
                                formItemProps={slotScope.props}
                            />,
                            <Select
                                label={'选择'}
                                name={'select'}
                                formItemProps={slotScope.props}
                            />,
                            <Text
                                label={'文本2'}
                                name={'text2'}
                                formItemProps={slotScope.props}
                            />,
                            <Number
                                label={'数字2'}
                                name={'number2'}
                                formItemProps={slotScope.props}
                            />,
                            <Select
                                label={'选择2'}
                                name={'select2'}
                                formItemProps={slotScope.props}
                            />
                        ]
                    }}
                </QueryFilter>
            )
        }
    }
})

API

属性

属性	说明	类型	默认值
layout	布局	'default' | 'vertical'	'default'
loading	加载状态	boolean	false
span	固定 Col 的 span, 传的话宽度不会随屏幕变化而变化	number	-
gutter	Antd Row 的 gutter	number	24
labelWidth	label 的宽度	number | 'auto'	80
submitter	提交按钮相关配置	object	-
collapsed	折叠的状态	boolean	true
showCollapse	是否展示折叠	boolean	false
defaultRowsNumber	折叠保留的行数	number	1

事件

事件名称	说明	回调参数
onCollapse	折叠的回调	function(value)
onResize	size 变化的回调	function(value)

方法

名称	描述	参数
getFormInstance	获取 Form 实例	() => object