纵向面板

## Vquery 纵向查询面板
由输入框、时间组件、选择器、单选框等控件组成，用以收集用户条件、校验条件、查询数据结果。
### 应用背景
纵向查询面板适用于一般PC页面查询。
### 代码演示
<div class="textDiv">

![](/media/202404/2024-04-30_095014_565306.png)

------------
查询面板

------------
代码示例如下
```html
<template>
    <div style="height:400px;">
        <HiVquery :isShowScheme="isShowScheme"  :sysScheme="sysSchemeData"  :size="size" :rules="rules" :fields="fields" @beforequery="beforequery" @afterquery="afterquery"></HiVquery>

},
                    {
                        name: "field4",
                        element: "el-time-select",
                        label: "发布时间"
                    },
                    {
                        name: "field11",
                        element: "HiNumberRange",
                        label: "区间范围"
                    },
                    {
                        name: "field13",
                        element: "hi-time-scheme",
                        label: "时间方案"
                    },
                    {
                        name: "field8",
                        element: "el-select",
                        label: "下拉选择",
                        props: {
                            multiple: true,
                            placeholder: "请选择"
                        },
                        children: [{
                                element: "el-option",
                                props: {
                                    label: "特假",
                                    value: "选项1"
                                }
                            },
                            {
                                element: "el-option",
                                props: {
                                    label: "事假",
                                    value: "选项2"
                                }
                            },
                            {
                                element: "el-option",
                                props: {
                                    value: "选项3",
                                    label: "病假"
                                }
                            }
                        ]
                    }
                ]
            };
        },
        methods: {
            beforequery(obj, param) {
                console.log("查询前");
            },
            afterquery(obj, param) {
                console.log("查询后");
            }
        }
    };
</script>
```

</div>

### Attributes

| 参数           | 说明            | 类型      | 可选值                   | 默认值   |
|--------------|---------------|---------|-----------------------|-------|
| btnName      | 查询按钮名称        | String  | —                     | 查询    |
| fields       | 查询字段配置项       | Array   | —                     |       |
| size         | 用于控制该表单内组件的尺寸 | string  | medium / small / mini |       |
| target       | 查询目标          | Object  | —                     |       |
| cancel       | 是否取消查询        | Boolean | —                     | false |
| isShowScheme | 是否显示方案        | Boolean | —                     | false |

### Events

| 事件名称        | 说明  | 回调参数        |
|-------------|-----|-------------|
| beforequery | 查询前 | param(查询参数) |
| afterquery  | 查询后 | param(查询参数) |

</style>