结合 yb-form 设计筛选表单，目前用于 yb-simple-table-page 与 yb-simple-card-page 的筛选表单使用

基本使用

collapsed

<template>
    <div style="margin-bottom:20px">
        collapsed
        <el-switch v-model="collapsed"></el-switch>
    </div>
    <yb-query-filter
        ref="form"
        :searchForm="searchForm"
        v-model="formModel"
        @search="handleSearch"
        :defaultRowsNumber="2"
        :collapsed.sync="collapsed"
    >
        <template v-slot:formItems="{ formModel, formItem }">
            <el-input v-model="formModel[formItem.prop]" clearable></el-input>
        </template>
    </yb-query-filter>
</template>
<script>
    export default {
        data() {
            return {
                collapsed: true,
                searchForm: {
                    formItems: [
                        {
                            label: '病案号',
                            prop: 'medicalRecordNumber',
                        },
                        {
                            label: '姓名',
                            prop: 'patientName',
                            defaultValue: '1',
                            autoSearch: false,
                        },
                        {
                            label: '信息分类',
                            prop: 'projectTypeName',
                        },
                        {
                            label: '地区',
                            prop: 'area',
                        },
                        {
                            label: '指标名称',
                            prop: 'name',
                        },
                        {
                            label: '指标内容',
                            prop: 'content',
                        },
                        {
                            label: '指标类型',
                            prop: 'type',
                        },
                        {
                            label: '指标状态',
                            prop: 'status',
                        },
                    ],
                    spans: { xl: 8, lg: 12 },
                },
                formModel: {},
            };
        },
        methods: {
            handleSearch() {
                this.$alert(this.formModel);
            },
        },
    };
</script>

显示 复制 复制

插槽使用

• 查询表单的插槽，同 yb-form 插槽使用
• 在默认的查询与重置按钮后追加内容的插槽："searchFormButtonsAppended"

<template>
    <yb-query-filter
        ref="form"
        :searchForm="searchForm"
        v-model="formModel"
        @search="handleSearch"
    >
        <template v-slot:formItems="{ formModel, formItem }">
            <el-input v-model="formModel[formItem.prop]" clearable></el-input>
        </template>
        <template v-slot:patientName="{ formModel, formItem }">
            <el-date-picker
                type="date"
                placeholder="选择日期"
                v-model="formModel[formItem.prop]"
            ></el-date-picker>
        </template>
        <template v-slot:other-buttons="">
            <el-button type="primary">新增</el-button>
            <el-button type="primary">导入</el-button>
        </template>
        <!-- 默认的查询与重置按钮后追加内容的插槽 -->
        <template v-slot:searchFormButtonsAppended="{ formModel, formItem }">
            <el-button type="danger">全部删除</el-button>
        </template>
    </yb-query-filter>
</template>
<script>
    export default {
        data() {
            return {
                searchForm: {
                    formItems: [
                        {
                            label: '病案号',
                            prop: 'medicalRecordNumber',
                        },
                        {
                            label: '姓名',
                            prop: 'patientName',
                        },
                        {
                            label: '',
                            prop: 'other-buttons',
                            // 排放在默认的查询按钮之后
                            after: true,
                            // 调整单独的栅栏占格
                            spans: { xl: 5, lg: 5, md: 5 },
                        },
                        {
                            /**
                             * 默认查询按钮项的属性：
                             * {
                             *      label: '',
                             *      prop: 'searchFormButtons',
                             *      excludeSpans: true,
                             * }
                             * 可进行覆盖追加属性
                             */
                            prop: 'searchFormButtons',
                            excludeSpans: false,
                            // 调整单独的栅栏占格
                            spans: { xl: 6, lg: 6, md: 6 },
                        },
                    ],
                    spans: { xl: 6, lg: 8 },
                },
                formModel: {},
            };
        },
        methods: {
            handleSearch() {
                console.log(this.formModel);
            },
        },
    };
</script>

显示 复制 复制

YbQueryFilter Attributes

参数	说明	类型	可选值	默认值
searchForm	筛选条件配置，详细配置 SearchForm	object	--	--
showCollapse	是否显示折叠器	boolean	--	true
defaultRowsNumber	自定义折叠状态下默认显示的表单控件行数，没有设置或小于 0，则显示两行控件，不包含查询重置按钮	number	--	2
collapsed	是否折叠状态，支持.sync 修饰符	boolean	--	true
v-model/value	表单值	object	--	--

YbQueryFilter SearchForm Attributes

参数	说明	类型	可选值	默认值
autoSearch	改变表单值，是否自动调用查询事件，当配置为 false 时，formItems 中配置 autoSearch 将无效	boolean	--	true
formItems	查询表单项的配置，详细配置 FormItems	object[]	--	[]
formClass	查询表单 className	string	--	--
formStyle	查询表单样式	object	--	--
spans	查询表单占格，如果是 object 类型，将与默认的{ xl: 4,lg: 6,md: 8,sm: 12, xs: 24}进行合并，总占格数为 24	boolean	--	false

YbQueryFilter FormItems Attributes

参数	说明	类型	可选值	默认值
autoSearch	改变该字段值，是否自动调用查询事件	boolean	--	true
after	是否渲染在重置按钮之后	boolean	--	true
-	同yb-form 的 formItems	object	--	--

YbQueryFilter Methods

事件名称	说明	回调参数
getYbForm	取得 yb-form 的组件实例	--

YbQueryFilter Events

事件名称	说明	回调参数
search	查询事件	value
change	筛选条件展开，收起点击后事件	{collapsed, formModel}
-	其他事件，同el-form (opens new window)	--