## Table

用于展示多条结构类似的数据，可对数据进行排序、筛选、对比或其他自定义操作。

### Table props

属性 | 说明 | 类型 | 可选值 | 默认值
--- | --- | --- | --- | ---
data | 数据 | Array | — | —
default-column-width | 默认最小列宽 | Number | — | 80
fit | 未设置 width 的列是否可以平分表格剩余宽度 | Boolean | — | true
stripe | 是否斑马纹表格 | Boolean | — | false
border | 是否带纵向边框表格 | Boolean | — | false
height | Table 的高度，默认为自动高度。如果 height 为 number 类型，单位 px；如果 height 为 string 类型，则这个高度会设置为 Table 的 style.height 的值，Table 的高度会受控于外部样式。 | String / Number | — | —
restrict | 是否将 Table 限定在父容器内，当 Table 的高度超过父容器时，将出现垂直滚动条 | Boolean | — | false
affix | 吸附在距离窗口顶部固定位置的效果，可直接传距离 | Boolean / Number | — | false
empty-text | 数据为空时显示的文本 | String | — | 暂无数据
default-sort | 默认排序列的 prop 和顺序 | Object | { prop: String, order: 'asc' / 'desc' } | —
default-sort-orders | 点击表头文字，排序规则轮转顺序，数组元素可选值：asc 表示升序，desc 表示降序，null 表示还原为原始顺序 | Array | — | ['asc', 'desc']
default-expand-all | 是否默认展开所有行 | Boolean | — | false
expand-row-keys | 可以通过该属性设置 Table 目前的展开行，需要设置 row-key 属性才能使用，该属性为展开行的 keys 数组 | Array | —
hide-expand-icon | 是否隐藏展开行图标 | Boolean | — | false
cell-span-method | 合并行或列的计算方法 | Function({ row, column, rowIndex, columnIndex }) | — | —
row-key | 表格行的 key 值，当 reserve-states 为 true 时，必须设置该属性 | String | — | —
current-row-key | 用于指定当前行，可以通过设置 .highlight-row 的样式来控制高亮 | String / Number | — | —
reserve-states | 数据实例改变后是否保存多选、展开等状态，需要设置 row-key | Boolean | — | false
children-prop | 数据结构为树结构时，叶子节点数组的对应属性名称，注意树结构的数据只能使用自定义排序 | String | — | children
tree-title | 树结构的第一列是否需要加上 title 属性 | Boolean | — | false
default-unfold-children | 数据结构为树结构时，是否默认展开所有的叶子节点 | Boolean | — | false
show-header | 是否显示表头 | String | — | true
virtual-scroll | 是否启用虚拟滚动 | Boolean | — | false
row-height | 行高，启动虚拟滚动时需要设置 | Number | — | 38
max-tree-row | 当表格为树结构时，开启虚拟滚动后，最大渲染的行数 | Number | — | 15
reverse-scroll-y | 是否反转 Y 轴滚轮，当该值为 true 时，滚动 Y 轴将控制水平方向的滚动 | Boolean | — | true
scroll-bar-class | 自定义滚动条样式名称 | String | — | —
frozen-data | 是否冻结 data，节省内存开销 | Boolean | — | true

### Table events

事件名称 | 说明 | 回调参数
--- | --- | ---
on-select | 当用户手动勾选数据行的 Checkbox 时触发的事件 | selection, row
on-select-all | 当用户手动勾选全选 Checkbox 时触发的事件 | selection
on-selection-change | 当选择项发生变化时会触发该事件 | selection
on-expand-change | 当用户对某一行展开或者关闭的时候会触发该事件 | row, expandedRows
on-unfolded-change | 当用户展开或者关闭树节点表格时会触发该事件 | row, unfoldedRows
on-sort-change | 当表格的排序条件发生变化时触发的事件 | column, prop, order
on-hit | 当表格内容滚动到边界时触发该事件，参数为边界位置信息 | 'left' / 'right' / 'top' / 'bottom'
on-scroll | 当表格内容滚动时触发（需要设置 height 或者 restrict 为 true） | isVertical, amount
on-slice | 当虚拟滚动做数据切割时触发 |

### Table methods

方法名 | 说明 | 参数
--- | --- | ---
doLayout | 对 Table 进行重新布局 | —
clearSelection | 用于多选表格，清空用户的选择 | —
toggleAllSelection | 用于多选表格，切换所有行的选中状态 | —
toggleRowSelection | 用于多选表格，切换某一行的选中状态，如果使用了第二个参数，则是设置这一行选中与否（selected 为 true 则选中） | row, selected
toggleRowExpansion| 用于可展开表格，切换某一行的展开状态，如果使用了第二个参数，则是设置这一行展开与否（expanded 为 true 则展开） | row, expanded
toggleRowUnfolding| 用于树结构表格，切换某一行的节点状态，如果使用了第二个参数，则是设置该节点的子节点是否显示（unfolded 为 true 则显示） | row, unfolded
clearSort | 用于清空排序条件，数据会恢复成未排序的状态 | —
sort | 手动对 Table 进行排序。参数 prop 属性指定排序列，order 指定排序顺序 | prop: String, order: asc / desc
setScrollPosition | 设置滚动条的位置 | left / right / top / bottom

### TableColumn props

属性 | 说明 | 类型 | 可选值 | 默认值
--- | --- | --- | --- | ---
type | 列的类型 | String | selection / expand | —
label | 表头内容 | String | — | —
prop | 表格内容对应的属性，支持多层访问：如 'user.address[0].city' | String | — | —
width | 列宽，单位为 px(只支持数值型的格式，如 400) | Number / String | — | —
min-width | 最小列宽，单位为 px(只支持数值型的格式，如 400) | Number / String | — | —
fixed | 是否固定列，true 等价于 left | Boolean / String | true / left / right | false
sortable | 对应列是否可以排序，如果设置为 'custom'，则代表用户希望自定义排序，需要监听 Table 的 on-sort-change 事件 | Boolean / String | true / false / 'custom' | false
sort-method | 对数据进行排序的时候使用的方法，仅当 sortable 设置为 true 的时候有效，需返回一个数字，和 Array.sort 表现一致 | Function(cellA, cellB, rowA, rowB) | — | —
sort-orders | 点击表头文字，排序规则轮转顺序，数组元素可选值：asc 表示升序，desc 表示降序，null 表示还原为原始顺序，当前列的该属性会覆盖 default-sort-orders 的值 | Array | — | ['asc', 'desc']
resizable | 是否可以通过拖拽右侧边框改变列宽 | Boolean | — | true
formatter | 格式化内容的函数 | Function(row, column, cellValue, rowIndex, columnIndex) | — | —
align | 单元格对齐方式 | String | left / center / right | left
header-align | 表头对齐方式（当值为 right 时，prepend 插槽和 append 插槽的位置互换） | String | left / center / right | left

### TableColumn scoped slots

名称 | 说明
--- | ---
header | 自定义表头的内容，参数为 { column, $index }
content | 自定义列的内容，参数为 { row, column, content, $rowIndex, $columnIndex }
expand | 展开行的内容，参数为 { row, $index }
prepend | 表头前置插槽，可以在不破坏原有表头功能的基础上进行额外扩展，参数为 { column, $index }
append | 表头后置插槽，可以在不破坏原有表头功能的基础上进行额外扩展，参数为 { column, $index }
headerText | 表头文本插槽，可以在不破坏原有表头功能的基础上进行额外扩展，参数为 { column, $index }
treeText | 树结构第一列文本的插槽，参数为 { row, column, content, $rowIndex, $columnIndex }