# 组件说明

## prop

- config 基本配置
- height 高
- maxHeight 最大高

### config

| 参数         |   类型   | 是否必填 | 默认值 |                   说明 |
| ------------ | :------: | :------: | :----: | ---------------------: |
| data         |  array   |    是    |   []   |             渲染的数据 |
| column       |  array   |    是    |   []   |   列数据；详细*column* |
| query        | function |    否    |   -    |     获取表格数据的方法 |
| index        | boolean  |    否    | false  |           是否显示序号 |
| selection    | boolean  |    否    | false  |         是否显示多选框 |
| hidePage     | boolean  |    否    | false  |       是否隐藏分页组件 |
| loading      | boolean  |    否    | false  |           表格加载状态 |
| showSummary  | boolean  |    否    | false  |   是否需要底部汇总计算 |
| events       |  object  |    否    |   {}   | 响应事件；详细*events* |
| 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 时，处理数据后再渲染 |
  | 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)=>{}

#### 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 |    否    |   -    | 更改页数时回调方法 |

#### @event apearation 的按钮事件

---

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

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

- rowClick(row) 点击某一行时

- sortClick(column) 点击筛选时