# 使用场景
基于 a-table 封装的表格组件，增强了加载数据、数据交互提示、列拖动、拖拽排序功能，可以用更少的代码量实现更复杂的功能。
# 使用示例
基础使用
支持多条数据分页展示及表格滚动。
支持传入函数
loadData 支持传入一个普通函数。
支持传入对象
loadData 支持传入一个对象。
扩展使用
支持对表格进行选择、筛选。
可编辑行
带行编辑功能的表格。
嵌套子表格
展示每行数据更详细的信息。
树形数据展示
表格支持树形数据的展示，当数据中有 children 字段时会自动展示为树形表格。
动态请求数据
支持初始化是否自动加载表格数据
可伸缩列
集成 vue-draggable-resizable 来实现可伸缩列。
行拖拽排序
支持表格上下行位置拖动进行排序
# API
其他更多 API，请移步传送门 (opens new window)
Attributes
参数 | 说明 | 类型 | 可选值 | 默认值 |
|---|---|---|---|---|
| loadData | 加载数据的方法，支持传入 Promise | Function | Object，返回结果结构遵循 { data: { rows: [], currentPage: 1, totalSize: 1 } } | Promise | Function | Object | -- | -- |
| autoLoad | 初始化是否自动加载表格数据 | Boolean | true | false | true |
| showPagination | 是否展示分页 | String | Boolean | auto | true | false | auto |
| currentPage | 当前分页 | String | -- | 1 |
| pageSize | 当前分页条数 | String | -- | 10 |
| showSizeChanger | 是否可以改变 pageSize | Boolean | true / false | true |
| drag | 表头 th 是否可以拖动改变列宽 | Boolean | true | false | false |
| columnStorage | 是否需要缓存 columns 数据 | Boolean | true | false | false |
| dragSort | 是否开启行拖拽排序 | Boolean | true | false | false |
| alert | 表格上方的操作提示框，接收两个参数：show、clear | Object | {show: Boolean, clear: Function} | -- |
| rowSelection | 同 a-table 的 rowSelection | Object | -- | -- |
Methods
参数 | 说明 | 类型 | 可选值 | 默认值 |
|---|---|---|---|---|
| drop | 行拖拽排序结束后的回调 | Function | (sourceItem, targetItem, isDrop) => {} | -- |
rowSelection
参数 | 说明 | 类型 | 可选值 | 默认值 |
|---|---|---|---|---|
| onChange | 选中项发生变化时的回调，暂不支持受控，外部使用 selectedRowKeys 和 selectedRows 需要在 change 中接收并保存 | Function | function(selectedRowKeys, selectedRows) | -- |
columns
参数 | 说明 | 类型 | 可选值 | 默认值 |
|---|---|---|---|---|
| needTotal | 当进行行选择时，是否展示列总计 | Boolean | -- | -- |