sf-table-search-form 表格检索组件
sf-table-search-form 介绍
该组件根据使用插槽的不同，会自动创建检索，重置，可折叠的按钮，并使用对应的事件
sf-table-search-form Attributes
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---|---|---|---|---|
| model | 检索表单数据对象 | Object | — | - |
| rebuildSearchParam | 检索前重新封装请求参数 | Function | - | - |
| basicNum | 基本检索的item数量，超过该值的item将会被隐藏，如果使用slot(basic, advance)的方式进行区分，则该值无效 | Number | — | - |
| searchAfterReset | 是否在重置之后进行检索 | Boolean | — | true |
| labelPosition | 检索属性标签名显示的位置 | String | — | 'right' |
| labelWidth | 检索属性标签名的宽度 | String | — | '130px' |
| labelSuffix | 检索属性标签名的后缀 | String | — | '' |
| disabled | 是否禁用 | String | — | - |
sf-table-search-form Methods
| 方法名 | 说明 | 参数 |
|---|---|---|
| resetFields | 重置表单 |
sf-table-search-form Events
| 事件名 | 说明 | 参数 |
|---|---|---|
| search | 点击检索按钮后触发 | searchParam（被检索的属性） |
| toggleCollapse | 检索区域展开和折叠时触发 | isCollapsed（是否折叠） |
| reset | 重置检索属性值时触发 | - |
sf-table-search-form 使用
1.使用属性basicNum；
使用basicNum属性，可以自定义表单元素显示的数量
PS:只有使用默认插槽时该属性才会生效
```vue
###### 设置basicNum="2"后初始的页面效果<br/>
###### 设置basicNum="2"后展开后的页面效果<br/>
##### 2.使用插槽basic和advance；</span>
> 写在basic插槽下的元素，在初始页面中显示，而且会自动创建检索和重置两个按钮<br/>
> 写在advance插槽下的元素，在初始页面中被隐藏，并显示一个展开和关闭的按钮<br/>
> PS:使用这两个插槽时，basicNum属性会失效<br/>
```vue
<template>
<div>
<sf-card>
<sf-table-search-form>
<template #basic>
<!-- 用户名 -->
<el-form-item label="用户名">
<el-input v-model="searchParams1.loginName" clearable></el-input>
</el-form-item> <!-- 真实姓名 -->
<el-form-item label="真实姓名">
<el-input v-model="searchParams1.realName" clearable></el-input>
</el-form-item>
</template>
<template #advance>
<!-- 年龄 -->
<el-form-item label="年龄">
<el-input v-model="searchParams1.age" clearable></el-input>
</el-form-item>
</template>
</sf-table-search-form>
</sf-card>
</div>
</template>
<script >
export default {
data() {
return {
searchParams1: {
loginName: 'u',
realName: '',
age: 18
}
}
}
}
</script>
使用basic插槽的初始页面效果
使用advance插槽的初始页面效果
使用advance插槽展开后的页面效果
3.只使用默认插槽；
<template>
<div>
<sf-card>
<sf-table-search-form>
<!-- 用户名 -->
<el-form-item label="用户名">
<el-input v-model="searchParams1.loginName" clearable></el-input>
</el-form-item>
<!-- 真实姓名 -->
<el-form-item label="真实姓名">
<el-input v-model="searchParams1.realName" clearable></el-input>
</el-form-item>
<!-- 年龄 -->
<el-form-item label="年龄">
<el-input v-model="searchParams1.age" clearable></el-input>
</el-form-item>
</sf-table-search-form>
</sf-card>
</div>
</template>
<script >
export default {
data() {
return {
searchParams1: {
loginName: 'u',
realName: '',
age: 18
}
}
}
}
</script>
页面效果
