# 组件说明

- 集合了三个组件，包括`page-search`、`page-table`、`pagination`;
- `config` 所需参数包含这三个组件内参数；（在同级下，并非包含数据）
- `page-search`中；配置`searchInit`后默认有响应事件会执行查询，`notQuery=true`关闭。
- 分页组件`pagination`事件默认响应`config.query()`方法，刷新表格数据

## prop

- config 基本配置数据
- height 页面组件高度

### config

| 参数             |   类型   | 是否必填 | 默认值 |                          说明 |
| ---------------- | :------: | :------: | :----: | ----------------------------: |
| column           |  array   |    是    |   []   |          列数据；详细*column* |
| data             |  array   |    是    |   []   |                    渲染的数据 |
| query            | function |    否    |   -    |            获取表格数据的方法 |
| pagination       |  object  |    是    |   {}   |    分页数据；详细*pagination* |
| hidePage         | boolean  |    否    | false  |              是否隐藏分页组件 |
| loading          | boolean  |    否    | false  |                  表格加载状态 |
| showSummary      | boolean  |    否    | false  |          是否需要底部汇总计算 |
| events           |  object  |    否    |   {}   |        响应事件；详细*events* |
| search           |  array   |    否    |   []   |      搜索框数据；详细*search* |
| searchInit       | function |    否    |   -    |       初始化 搜索的 json 数据 |
| searchLabelWidth |  string  |    否    |   -    | 搜索栏的 label-width 统一设置 |
| rowClassName     | boolean  |    否    | false  |            是否开启行间隔颜色 |

#### column 列

---

- prop - array 数组 拼接字符串显示，不会计算底部汇总

  | 参数       |         类型         | 是否必填 | 默认值 |                                        说明 |
  | ---------- | :------------------: | :------: | :----: | ------------------------------------------: |
  | label      |        string        |    是    |   -    |                                        标题 |
  | prop       |     string/array     |    是    |   -    |          展示值的 key，开启 parent 时非必填 |
  | width      |        string        |    否    |   -    |                                        宽度 |
  | fixed      |       boolean        |    否    | false  |                                      固定列 |
  | mode       |        string        |    否    |   -    |     模式；可选值 icon、index、tag、function |
  | icon       |        string        |    否    |   -    |              mode=icon 时，展示的 icon 类名 |
  | type       | string/function(row) |    否    |   -    |                mode=tag 时，展示的 tag 风格 |
  | fn         |    function(row)     |    否    |   -    |          mode=function 时，处理数据后再渲染 |
  | index      |       boolean        |    否    | false  |                                是否显示序号 |
  | selection  |       boolean        |    否    | false  |                              是否显示多选框 |
  | parent     |       boolean        |    否    | false  |                            是否增加二级数据 |
  | column     |        array         |    否    |   -    | 二级的列； parent 开启时必填，参数同 column |
  | sum        |        object        |    否    |   -    |                       列汇总配置；详细*sum* |
  | apearation |        array         |    否    |   -    |                  按钮数组；详细*apearation* |
  | align      |        string        |    否    | center |              表格对齐方式，同 element-table |
  | rowClass   |        string        |    否    |   -    |                                  单元格类名 |

#### mode 展示的模式

- icon：展示的图标、icon=图标类名，目前仅支持 element-ui 内置 icon
- index：序号下标，不需要绑定 prop
- tag：el-tag 标签，type=string|function；tag 风格
- function：特殊的展示数据时，可用函数处理，fn=(row)=>{}

#### pagination 分页组件数据

---

- 会进行双向绑定，直接更改父级组件数据
- 更改页数时，会直接调用 pops.query 方法获取列表数据

| 参数      |  类型  | 是否必填 | 默认值 | 说明 |
| --------- | :----: | :------: | :----: | ---: |
| pageIndex | number |    是    |   -    | 页码 |
| pageSize  | number |    是    |   -    | 页数 |
| total     | number |    是    |   -    | 总数 |

#### apearation 按钮数组

---

| 参数     |       类型       | 是否必填 |   默认值    |         说明 |
| -------- | :--------------: | :------: | :---------: | -----------: |
| label    |      string      |    是    |    true     |     按钮文字 |
| type     |      string      |    否    |    text     |     按钮类型 |
| size     |      string      |    否    |    small    |         尺寸 |
| disabled | Boolean/function |    否    |    false    | 按钮是否禁用 |
| show     |     function     |    否    | return true | 按钮是否显示 |

#### sum 列汇总配置

---

- 需开启 showSummary = true

| 参数        |  类型   | 是否必填 | 默认值 |                 说明 |
| ----------- | :-----: | :------: | :----: | -------------------: |
| notComputed | boolean |    否    |  true  |           是否汇总列 |
| title       | string  |    否    |   -    | 不汇总，直接替换文本 |
| unit        | string  |    否    |   -    |         汇总后的单位 |
| toFixed     | number  |    否    |   0    | 汇总后保留的小数位数 |
| isNaNTitle  | string  |    否    |   -    |   计算失败展示的文本 |

#### events 分页组件数据

---

| 参数             |   类型   | 是否必填 | 默认值 |               说明 |
| ---------------- | :------: | :------: | :----: | -----------------: |
| onChangePageSize | function |    否    |   -    | 更改页数时回调方法 |

#### search 搜索模块配置

---

- mode 搜索框模式；可选值 ：
  - daterange ：日期范围选择；
  - monthrange ：月份范围选择；
  - input：输入框；
  - select：下拉选项；
  - checkbox：复选框；
  - button：按钮；
- value ：范围日期选择时，对应数组;checkbox：对应 boolean
- options ： {label:'',vlaue:''}
- 配置 searchInit 后默认有响应事件会执行查询，notQuery=true 关闭

| 参数        |     类型     | 是否必填 | 默认值 |                                     说明 |
| ----------- | :----------: | :------: | :----: | ---------------------------------------: |
| mode        |    string    |    是    |   -    |                               搜索框模式 |
| labelWidth  |    string    |    否    |   -    |                               label 宽度 |
| label       |    string    |    否    |   -    |                          搜索 label 文字 |
| value       | string/array |    是    |   -    |                                 搜索的值 |
| key         |    string    |    否    |   -    |         搜索框的 key，返回搜索对象的 key |
| notQuery    |   boolean    |    否    |   -    |                     是否关闭组件查询事件 |
| placeholder |    string    |    否    |   -    | 输入框的占位符，按钮的文字；复选框的文字 |
| size        |    string    |    否    |  mini  |                               按钮的尺寸 |
| type        |    string    |    否    |   -    |                               按钮的类型 |
| options     |    array     |    否    |   -    |               mode=select 时；下拉的选项 |
| loading     |   boolean    |    否    | false  |             mode=button 时，按钮加载状态 |

##### slot

- page-search-before 具名插槽
  - 在搜索条件前加入额外的搜索；额外的搜索数据需求单独处理

#### @event 搜索栏事件

---

- onSearch(item,data);事件
  - item：所触发事件的 item 数据
  - 搜索栏的数据对象 {key:value} 的形式返回
- onChangePageSize(size)；改变每页数量事件

- onChangeCurrentPage(index)；改变页码事件

- rowBtnClick(row,index,btnItem)；表格行按钮点击事件

  - row：每行的数据
  - index：按钮的下标
  - btnItem：按钮的 item 数据

- rowClick(row) 点击某一行时

- sortClick(column) 点击筛选时