You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
45 lines
1.7 KiB
45 lines
1.7 KiB
# Search Form
|
|
|
|
一个自适应的搜索表单，模仿ant-design-pro，根据父元素的内宽来确定一行渲染多少个表单控件，同时确定是否需要折叠。
|
|
|
|
<img :src="$withBase('/search-form_1.png')">
|
|
<img :src="$withBase('/search-form_2.png')">
|
|
|
|
### 引入：
|
|
|
|
`@/component/SearchForm`
|
|
|
|
### 使用：
|
|
```html
|
|
<search-form v-model="searchForm" @search="search">
|
|
<el-form-item label="label1">
|
|
<el-input/>
|
|
</el-form-item>
|
|
<el-form-item label="label2">
|
|
<el-input/>
|
|
</el-form-item>
|
|
</search-form>
|
|
```
|
|
|
|
### SearchForm Attributes：
|
|
|
|
| 参数 | 说明 | 类型 | 默认 |
|
|
| :---------: | :----------------------------------: | :------: | :-------: |
|
|
| model | 表单数据，支持v-model，用于重置表单 | `object` | - |
|
|
| label-width | 等同于 `el-form` 的 `label-width` | `string` | `'120px'` |
|
|
| xs | 父元素内宽<768px时，每行渲染多少空间 | `number` | `1` |
|
|
| sm | >=768px | `number` | `2` |
|
|
| md | >=998px | `number` | `3` |
|
|
| lg | >=1200px | `number` | `4` |
|
|
|
|
### SearchForm Events：
|
|
|
|
| 名称 | 说明 |
|
|
| :----: | :--------------------------------: |
|
|
| search | 点击查询按钮触发 |
|
|
| reset | 点击重置按钮触发，参数为表单初始值 |
|
|
|
|
::: tip 注意
|
|
`<search-form>` 算是对 `<el-form>` 的封装，其 `label-suffix` 属性为`':'`，
|
|
也就是说 `<search-form>` 下的所有 `<el-form-item>` 项的label后缀为`':'`
|
|
:::
|
|
|