# Table 表格
展示行列数据。

## 何时使用
- 当有大量结构化的数据需要展现时；
- 当需要对数据进行排序、搜索、分页、自定义操作等复杂行为时。

### 基本使用
指定表格的数据源`dataSource`为一个数组。

@[demo](demo/basic.vue)

### 支持slot
允许声明`header`或`footer`的`slot`分别插入在头部或底部

@[demo](demo/slot.vue)

### 支持Column slot
在`columns`描述中使用用`slot`字段声明`slot`的`name`

@[demo](demo/slot-columns.vue)

### 样式选择
内置6种样式使用`theme`设置。

@[demo](demo/theme.vue)


### 高亮行
通过动态设置`rowClass`来高亮

@[demo](demo/highlight.vue)


### 可选择
第一列是联动的选择框。
传递`row-selection`对象设置选择行相关的属性，包含`onChange`方法时激活第一列勾选框。

@[demo](demo/select.vue)


### 筛选和排序
支持单列排序和多列筛选。
设置`column`的`filters`选项列表和`onFilter`筛选方法，对列进行筛选操作。
设置`column`的`sorter`方法对列进行排序操作。

@[demo](demo/filter.vue)


### 固定表头
方便一页内展示大量数据。
设置`height`或者`maxHeight`属性，表示表格的高度，固定表头。

@[demo](demo/fixed-head.vue)


### 固定列
对于列数很多的数据，可以固定前后的列，横向滚动查看其它数据。
设置列描述数据的`fixed`属性为`left`或者`right`将列固定显示。

@[demo](demo/fixed-columns.vue)


### 表头分组
`columns[n]`可以内嵌`children`，以渲染分组表头。

@[demo](demo/group-column.vue)

### 配套分页
设置`pagination`属性，参考分页组件的[配置](/components/pagination.html)，展示分页。
并设置`loading`属性表示当前正在加载中。

@[demo](demo/paging.vue)


### 表格行/列合并
表头只支持列合并，使用`column`里的`colSpan`进行设置。

表格支持行/列合并，设置`span-method`方法，针对行列返回对应的`colspan`和`rowspan`属性设置合并。

@[demo](demo/group.vue)


### 尺寸大小
一种相对大的列表， 两种紧凑型的列表，小型列表只用于对话框内。

@[demo](demo/size.vue)

### 自定义表格内容
设置`column`项的`title`字段、`render`字段为函数，可以自定义显示表格内容

@[demo](demo/render.vue)

### 表格行可拖动排序
设置`draggable`属性为`true`可拖动行进行排序

@[demo](demo/draggable.vue)


### 统计
设置`summary`属性为`true`展示表格底部统计

@[demo](demo/summary.vue)

### 表格行绑定自定义事件
给表格行绑定自定义事件，当前行数据(row)以参数形式给到绑定的事件

@[demo](demo/custom-event.vue)

### 表格行内部type类型渲染
使用内部type渲染表格行

@[demo](demo/type.vue)

### 表格行自定义外部type类型渲染
使用内部type渲染表格行

@[demo](demo/custom-type.vue)

### 列宽设置
支持 `table` 的 `col-min-width` 和 `column` 的 `width`, `minWidth`, `minDragWidth` 多种属性设置列宽。配合 `cacheWidthKey` 可本地缓存列宽。

@[demo](demo/column-width.vue)

### props
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
| --- | --- | --- | --- | --- |
| columns | 表格列的配置描述，具体项见下表 | array | - | - |
| data-source | 数据数组	| array | - | - |
| selected-rows | 选中项列表	| array | - | - |
| height | 列表高度	| number | - | - |
| max-height | 列表最大高度	| number | - | - |
| width | 列表最大宽度	| number | - | - |
| size | 表格体型	| string | large, medium, small, mini | medium |
| row-selection | 选择功能的配置，具体项见下表	| object | - | - |
| bordered | 是否展示外边框和列边框	| boolean | - | false |
| span-method | 合并行或列的计算方法	| function({ row, column, rowIndex, columnIndex }) | - | - |
| draggable | 是否可以拖动排序	| boolean | - | false |
| row-key | 行数据的Key，用来优化 Table 的渲染，同时也用于选中项的value值 | string | - | false |
| theme | 表格样式 | string | horizontal-bordered, vertical-bordered, bordered, striped, striped-bordered | striped |
| col-min-width | 未设置宽度的列的最小宽度 | number | - | 80 |
| checkbox-col-width | 复选框列的宽度 | number | - | 60 |
| pagination | 是否显示分页 | Object, Boolean | - | false |
| loading | 是否显示加载中状态，可以包含 Spinner 的属性 | Object, Boolean | - | false |
| onSort | 当排序时回调 | Function | - | - |
| onFilter | 当筛选时回调 | Function | - | - |
| summary | 是否显示统计行 | Boolean | - | false |
| summaryText | 统计行的标题 | String | - | 合计 |
| summaryRender | 统计行自定义渲染函数，接收列(`column`)和行数据(`rows`)两个参数 | Function | - | - |
| row-events | 给表格行绑定自定义事件，并将当前行(`row`)的数据传给事件绑定的处理函数 | Object | - |
| header-row-class-name | 表头行的 `className` 的回调方法，也可以使用字符串为所有表头行设置一个固定的 `className。` | Function({row, rowIndex})/String | - |
| observer-dom-resize | 用于控制是否在外部容器大小发生变化时触发表格布局的重计算（默认情况下只在发生 window.resize 事件后触发） | Boolean | false |
| cacheWidthKey | 用于读取和缓存上次拖拽的列宽，需配合 `column.key` 使用 | String | - |

### Column
列描述数据对象，是`columns`中的一项。

| 参数 | 说明 | 类型 | 可选值 | 默认值 |
| --- | --- | --- | --- | --- |
| colSpan | 表头列合并,设置为0时，不渲染 | number | - | - |
| key | 列数据在数据项中对应的key	| string | - | - |
| fixed | 列是否固定 | string | left, right | - |
| render | 生成复杂数据的渲染函数	| function(h, { row, rowIndex, colIndex }) | - | - |
| sortable | 是否显示排序器，如不设置`sorter`，使用默认排序 | boolean | - | - |
| sorter | 设置`true`为服务端排序, 允许设置自定义排序函数(参考 Array.sort 的 compareFunction) | function/boolean | - | (a, b) => a - b |
| onBeforeSort | **当点击排序器时，在排序前执行此函数**，返回`false`可以阻止继续排序 | function | - |
| title | 列头显示文字，可设置函数返回自定义列头 | string/function(h) | - | - |
| filters | 表头的筛选菜单项 | array | - | - |
| filterable | 是否禁止显示筛选器，默认根据`filters`的设置展示 | boolean | - | - |
| onFilter | 筛选的运行函数，不设置则为服务端筛选, 允许设置自定义筛选函数| function(filterValue, row) | - | - |
| placeholder | 暂无数据时的占位符 | string | - | - |
| width | 定义列的宽度，当宽度小于等于0时，列宽自适应 | number | - | - |
| minWidth | 定义列的最小宽度，优先级高于 table 的 col-min-width, 在设置了 width 时，minWidth 不会生效 | number | - | - |
| minDragWidth | 定义列的最小拖拽宽度，与 width，minWidth 互不影响 | number | - | 20 |
| align | 对齐方式 | string | `left`/`center`/`right` | `left` |
| className | 列class类名 | string | - | - |
| ellipsis | 添加省略 | boolean | - | false |
| slot | slot的name | string | - | - |
| transform | 可以通过此函数二次处理值 | function | - | - |
| type | 自定义渲染类型 | string/array/function({ row, rowIndex, colIndex }) | - | - |

### rowSelection
选择功能的配置。

| 参数 | 说明 | 类型 | 可选值 | 默认值 |
| --- | --- | --- | --- | --- |
| getCheckboxProps | 选择框的默认属性配置 | function(row) | - | - |
| selections | 自定义选择项配置项，参考`select`组件的options参数 | array | - | - |
| onChange | 选中项发生变化的时的回调 | function(selectedRows) | - | - |
| onSelectionChange | 自定义选择项发生变化的时的回调 | function(value) | - | - |


### Events
表格事件

| 事件名 | 说明 | 回调参数 |
| --- | --- | --- |
| drop | 排序完成 | newIndex, oldIndex |

## Methods
表格方法
| 方法 | 说明 | 参数 |
| --- | --- | --- |
| scrollTo | 设置表格内部滚动高度 | value |