# 统一搜索列表页使用说明

使用时需引入此文档下目录下的【index.vue】、【FormItem.vue】文件

## 参数说明：


|  参数   | 说明  |  类型  | 默认值 |
|  ----   | ----  | ---- | ---- |
| columns(必传项) | 表格列的配置描述 须符合ant-design-vue中table组件的column属性规范,当列表的某一列字段需要加排序功能时，在定义columns时在该字段里加上sorter属性，并设为true即可|   Array | - |
| from(必传项)    | 搜索表单数据对象 | Object | - |
| dataFilter | 数据源筛选函数，当需要对数据源进行操作时传入 | Function(res) | 默认返回'res.data.list'
|   url(必传项)   | 数据请求地址 | String | - |
| disablePagination | 是否禁止分页 | Boolean | false |
| tableOperation | 是否开启表格操作按钮 | Boolean | true
| method | 请求方式 | String | 'get' |
| data | 当请求方式为post时，需要传入的搜素表单数据对象 | Object | null |
| collectSearch | 是否开启表单搜集，一般在搜索表单使用ant-design-vue中Form组件时需要开启 | Boolean | false |
| rowSelection | 列表项是否可选择 | Boolean | true |
| rowHoldNumber | 搜索表单每行字段可显示的个数，其个数只能是24的倍数，超过此数量的会被隐藏，可通过下拉箭头显示被隐藏的字段 | Number | 4 |
|scroll| 设置横向或纵向滚动，也可用于指定滚动区域的宽和高|{ x: number, y: number }| -|

## 事件

| 事件名称 | 说明 | 回调参数 |
| ---- | ---- | ---- |
| collectSearch | 当开启表单搜集时，需要传入表单搜集的函数，该函数是将搜集到的数据赋值给要传入的搜素表单数据对象'form'| - |
| resetCollectSearch | 当开启表单搜集时，重置表单搜集数据 | - |
| onCollectSelected | 开启列表项选择时，可通过该事件接收到列表项选中的内容 | Function(selectedRows) |

## 插槽说明

统一搜索列表页通过设置插槽将列表页进行拆分布局

其布局使用的插槽：
1. search-form：   搜索表单插槽，用于搜索部分表单的存放，搜索部分的表单需放在引入的FormItem组件下
2. search-action： 操作按钮插槽，用于操作按钮部分的存放
3. search-hidden： 隐藏区插槽，用于给搜索时有些需要提交，但又不需要显示出来的字段存放

在表格中某些字段需要scopedSlots属性来渲染时可使用自定义插槽，其可用的slot-scope为【text】、【record】

使用例子请看此文档目录下的【Example.vue】文件