数据表格 ZyDataTable
数据表格是一种用于展示结构化数据的组件，支持分页、排序、多选等功能。
基本用法
以下是一个基本的表格示例。
| 列1 | 列2 |
|---|---|
| 数据1 | 数据2 |
| 数据3 | 数据4 |
空状态
当表格没有数据时，可以通过设置 emptyTableText 属性来显示空状态。
| 列1 | 列2 |
|---|---|
曼波...暂无数据喵~ | |
加载中状态
当表格正在加载数据时，可以通过设置 loading 属性为 true 来显示加载中状态。
| 列1 | 列2 |
|---|---|
多选功能
通过设置 selection 属性为 true，可以开启表格的首列多选框功能。
选中的行数据：[]
| 列1 | 列2 | |
|---|---|---|
| 数据1 | 数据2 | |
| 数据3 | 数据4 |
分页功能（支持本地 & 远程）
第一步*：通过设置 enableCurrentPageButtons 属性为 true，可以开启表格的第几页控制按钮（右下角）。
第二步：通过设置 enableItemsPerPageDropdown 属性为 true，可以开启分页大小调整的的下拉菜单（左下角）。
表格的分页功能分为本地分页和远程分页两种模式。
第三步*：需要设置 rowsPerPage 每页显示的行数，表格会自动计算并显示分页信息。在本地分页模式下，表格的数据长度是通过 tableData 传入的数据总数。
通过设置 remote 属性为 true，可以开启远程分页模式。
第四步：而在远程分页模式下，通过设置 currentPage 当前页码，rowsPerPage 每页显示的行数，total 数据总数，可以更精细的控制表格的分页，并能优化数据量大时的数据传输长度。
| 列1 | 列2 |
|---|---|
| 数据1 | 数据2 |
| 数据3 | 数据4 |
| 数据5 | 数据6 |
| 数据7 | 数据8 |
| 数据9 | 数据10 |
| 数据11 | 数据12 |
| 数据13 | 数据14 |
| 数据15 | 数据16 |
| 数据17 | 数据18 |
| 数据19 | 数据20 |
显示 1 到 10 条记录，共 20 条记录
排序功能（支持本地 & 远程）
必须*：需要设置 tableHeader 列标题配置，将需要排序的字段的 sortable 设置为 true ， key 严格地设置为 数据中该字段的字段名 ，可以开启表格的排序功能。
表格的排序功能分为本地排序和远程排序两种模式。
在本地排序模式下，直接点击列表头中可以排序的字段名，即可实现排序。
本地排序规则：
同一个字段：第一次点击正序，第二次点击倒序，第三次点击还原默认顺序。
不同字段：点击后，取消其他字段的排序，只对当前点击的字段，按上一条规则排序。
通过设置 remote 属性为 true，可以开启远程排序模式。
在远程排序模式下，需要接收 sortChange 事件，在事件中处理排序逻辑，并通过 Props 控制表格组件的显示。其中，sortLabel 为排序字段名，sortOrder 为排序方式。
| 列1 | 列2 |
|---|---|
| 数据1 | 数据2 |
| 数据3 | 数据4 |
| 数据5 | 数据6 |
| 数据7 | 数据8 |
| 数据9 | 数据10 |
| 数据11 | 数据12 |
| 数据13 | 数据14 |
| 数据15 | 数据16 |
| 数据17 | 数据18 |
| 数据19 | 数据20 |
显示 1 到 10 条记录，共 20 条记录
API
<ZyDataTable> Props
| 参数名 | 描述 | 类型 | 默认值 |
|---|---|---|---|
| tableHeader | 列标题配置，包含每列的名称、键、排序字段、是否可排序、对齐方式等信息 | Array<IHeaderConfiguration> | - |
| tableData | 表格数据 | Array | - |
| emptyTableText | 表格为空时显示的提示信息 | String | "No data found" |
| loading | 表格是否处于加载状态 | Boolean | false |
| selection | 是否开启首列多选框 | Boolean | false |
| showExpandBtn | 是否开启展开按钮 | Boolean | false |
| expandAll | 是否展开所有数据 | Boolean | false |
| expandInTable | 展开内容是否显示在主表的 tr 内 | Boolean | true |
| totalArray | 绑定到 index 的小计行数据 | Array<TotalArrayItem> | - |
| enableCurrentPageButtons | 是否启用第几页调整按钮 | Boolean | false |
| enableItemsPerPageDropdown | 是否启用每页显示行数的下拉菜单 | Boolean | false |
| currentPage | 当前页码 | Number | - |
| rowsPerPage | 每页显示的行数 | Number | - |
| total | 数据总数 | Number | - |
| sortLabel | 被排序的字段 | String | - |
| sortOrder | 排序顺序（正序/倒序） | "desc" | "asc" | - |
| remote | 是否为远程（后端）控制分页、排序 | Boolean | false |
<ZyDataTable> Events
| 事件名 | 描述 | 参数 |
|---|---|---|
| current-change | 当前页码改变时触发 | page: number |
| sort-change | 排序改变时触发 | { columnName: string, order?: string } |
| items-per-page-change | 每页显示行数改变时触发 | rowsPerPage: number |
| select-change | 多选框选中状态改变时触发 | selectedRows: Array<any> |
