cjd-parkball/src/components/filterTable/index.md

> 中后台业务组件库，中后台就像公园，进入需要买门票（登录），所以以 Parkball(公园球) 命名，公园内必定捕获！作为一个组件库，提供使用方法文档，方便开发者的调用

---
title: 表格筛选
title_en: FilterTable
name: filterTable
publishDate: 2018-5-08
category: 1
order: 2
description: 表格数据实时筛选
---

 何时使用
当表格数据需要搜索、分页行为时

 API
# TableFilter
|参数|说明|类型|默认值|
|---|---|---|---|
|className|类名|string|-|
|handlers|操作按钮，前两项分别会去替换默认的重置、搜索按钮|string [] \| ele []|`['重置','搜索']`|
|showHandlers|是否显示操作按钮|boolean|`true`|
|agile|item 值改变后立即请求 table 数据，当任一 item 设置了 `rules`，该配置无效|boolean|`false`|
|onSearch|点击第一个 handler 的回调事件|Function ()|-|
|onReset|点击第二个 handler 的回调事件|Function ()|-|
|items|包含的搜索项，item 参数见下方| item [] |-|

# Item
|参数|说明|类型|默认值|
|---|---|---|---|
|name|同表单域的 name 属性|string|-|
|label|同表单域的 label 属性|string|`name`|
|placeHolder|同表单域的 placeholder 属性|string|`请输入/选择` \| `please enter/select`|
|defaultValue| Item 的默认值 |-|-|
|disabled| Item 设置为禁用状态 | boolean | `false` |
|hidden| Item 设置为隐藏域 | boolean | `false` |
|itemType|可选值为 `input` `select` `combobox` `datePicker` `checkbox` |string|`input`|
|subType|可选值为 `time` `date` `week` `month` `range` |string|-|
|selectOptions| `select` type 的 options 枚举 |{ value: , label: , } []|[]|
|buildOptions|item type 为 `combobox` 且 url 不为空，当 input 变化时，自动请求数据，并将返回数据传入该函数|Function ()|-|
|onChange| Item 值发生改变时的回调 |Function ()|-|
|nameFormat| 对该 Item 的 请求参数进行转换，搜索时触发，要求 `return` 新的对象，该对象需要包含 0 到多个 `name:value` 键值对 | Function(value) => {name: value} | - |
|rules| Item 的检验规则 |-|-|
|pagination| 对分页条的配置 | `{}` | `{total: 0, pageNo: 1, pageSize: 20}` |
|table| 用来展示表单数据的表单 | `ReactElement` | - |
|tableFooter| 表单下方，分页条左边要展示的元素 | `ReactElement` | - |