Search
基于 Form 组件二次封装，实现查询、重置功能，具有默认的灵活的响应式功能
| 参数 | 必传 | 类型 | 默认值 | 介绍 | 可选值 |
|---|---|---|---|---|---|
| schema | 是 | array | [] | 数据源，下方会详细介绍 | |
| model | 否 | object | {} | 表单数据 | |
| is-col | 否 | boolean | false | 是否使用栅格布局 | true, false |
| layout | 否 | string | inline | 操作按钮风格位置 | 'inline', 'bottom' |
| labelWidth | 否 | string,number | auto | 表单label宽度 | |
| buttonPosition | 否 | string | center | 底部按钮的对齐方式 | 'left', 'center', 'right' |
| showSearch | 否 | boolean | true | 是否显示查询按钮 | true, false |
| showReset | 否 | boolean | true | 是否显示重置按钮 | true, false |
| showExpand | 否 | boolean | false | 是否显示展开收起按钮 | true, false |
| expandField | 否 | string | '' | 伸缩的界限字段(没看懂是干啥的) | |
| inline | 否 | boolean | true | 表单项单列竖向排列 | true, false |
| removeNoValueItem | 否 | boolean | true | 是否去除空值项 | true, false |
| searchLoading | 否 | boolean | false | 开启查询按钮loading状态 | true, false |
| resetLoading | 否 | boolean | false | 开启查询按钮loading状态 | true, false |
| search | 否 | 事件 | {} | 查询按钮返回数据 | |
| reset | 否 | 事件 | {} | 重置按钮返回数据 | |
| register | 否 | 事件 | 页面组件加载完成后执行 | ||
| validate | 否 | 事件 |
1. schema
| 属性 | 类型 | 介绍 | 可选值 |
|---|---|---|---|
| field | string | 唯一标识 | |
| label | string | 标题 | |
| colProps | object | col组件属性 | span/xs/sm/md/lg/xl/tag |
| componentProps | object | 表单组件属性，具体可以查看element-plus文档 | |
| formItemProps | object | formItem组件属性，具体可以查看element-plus文档 | |
| component | string | 渲染的组件名称 | RadioGroup / RadioButton / CheckboxGroup / CheckboxButton / Input / Autocomplete / InputNumber / Select / Cascader / Switch / Slider / TimePicker / DatePicker / Rate / ColorPicker / Transfer / Divider / TimeSelect / SelectV2 / InputPassword /Editor / TreeSelect / Upload / JsonEditor |
| value | any | 初始值 | |
| remove | boolean | 是否隐藏，如果为true，会连同值一同删除，类似v-if | |
| hidden | boolean | 样式隐藏，不会把值一同删掉，类似v-show | |
| optionApi | 远程加载下拉项 |
<Search
:schema="schema"
:is-col="false"
layout="inline"
button-position="right"
:search-loading="searchLoading"
:reset-loading="resetLoading"
show-expand
expand-field="field6"
@search="handleSearch"
@reset="handleSearch"
@register="searchRegister"
/>
const schema = reactive<FormSchema[]>([
{
field: 'field1', // 唯一标识
label: '输入框', // 标题
colProps:{ // col组件属性
span?: number
xs?: number
sm?: number
md?: number
lg?: number
xl?: number
tag?: string
},
componentProps: {}, // 表单组件属性，具体可以查看element-plus文档
component: 'Input', // 渲染的组件名称 | "RadioGroup" | "RadioButton" | "CheckboxGroup" | "CheckboxButton" | "Input" | "Autocomplete" | "InputNumber" | "Select" | "Cascader" | "Switch" | "Slider" | "TimePicker" | "DatePicker" | Rate | ColorPicker | Transfer | Divider | TimeSelect | SelectV2 | InputPassword | Editor | TreeSelect | Upload | "JsonEditor"
formItemProps:{}, // formItem组件属性，具体可以查看element-plus文档
}，
{
field: 'field2',
label: '选择框',
component: 'Select',
componentProps: {
options: [
{
label: t('userDemo.disable'),
value: 0
},
{
label: t('userDemo.enable'),
value: 1
}
]
}
},
{
field: 'field3',
component: 'DatePicker',
label: '时间选择器',
componentProps: {
type: 'date'
}
},
{
field: 'field4',
component: 'Input',
label: `label`,
formItemProps: { // slots
slots: {
label: ({ label }) => {
return (
<div class="custom-label">
<span class="label-text">custom {label}</span>
</div>
)
}
}
}
},
])
