MTable
MTable 是基于arco-design-vue的表格二次封装的 Table 组件， 支持所有原生表格参数、事件、插槽，同时增强了部分功能。
使用示例
由于篇幅问题，具体使用场景请查看github。
Props
| 属性名 | 类型 | 描述 | 默认值 |
|---|---|---|---|
| columns | ColumnProps[] | 列的配置项，即表头显示内容,必填 | - |
| data | TableData[] | 静态data | - |
| requestApi | (param: {key:string}:unknown) => Promise<AxiosResponse<Result<T>>> | 请求表格的api, AxiosResponse ==> Result | - |
| requestAuto | boolean | 是否自动查询 | - |
| dataCallback | (data: {key:string}:unknown) => P | 返回数据的回调函数，可以对数据进行处理 | - |
| isSplit | boolean | 是否需要拆分布局，左右布局的形式 | - |
| spanSplit | number | 左边部分占多少栅格数,共24等分 | - |
| splitLine | boolean | 是否需要分隔线 | - |
| title | string | 表格标题,在表格打印的时候用 | - |
| subTitle | string | 子标题（分隔时，左边块的标题），需配合isSplit使用 | - |
| initParam | {key:string}:unknown | 初始化参数 | - |
| pagination | boolean | 是否需要分页组件 | true |
| bordered | boolean | 是否需要表格纵向边框 | false |
| stripe | boolean | 是否开启斑马纹 | false |
| toolButton | boolean | 是否显示表格功能按钮，打印和导出功能 | true |
| selectId | string | 当表格数据多选时，所指定的 id | id |
| isExpand | TableExpandable | boolean | 是否显示展开列信息 | - |
| isRowSelection | RowSelectionType | TableRowSelection | boolean | 是否可以选择行 | - |
| isTreeTable | boolean | 是否是树形表格，默认为false。如果是树形表格则需要配置该项。注意：每行下面会有一块占位span | false |
| xScroll | number | string | boolean | x轴滚动的距离，如果是boolean是boolean,则使用默认值 | - |
| fillRows | boolean | 是否填充空行 | - |
| isSet | boolean | 是否需要设置最小行高，配合fillRows使用,如果为 false 则要自行处理样式问题 | - |
| isChildren | boolean | 是否展示左边的展开图标 | - |
| expandedRowKeys | string[] | 树形表格，设置默认展开的值 | - |
| remember | boolean | 用户配置是否记录查询条件的内容 | true |
| tableShow | boolean | 是否展示表格 | true |
ColumnProps
| 属性名 | 类型 | 描述 |
|---|---|---|
| enum | {key: string}: unknown | -- |
| search | SearchProps | -- |
| extra | Alias | -- |
SearchProps
| 属性名 | 类型 | 描述 |
|---|---|---|
| el | SearchType | 当前搜索框的类型 |
| isShow | boolean | 搜索列是否可见 |
| props | {key: string}: unknown | 搜索项参数或者属性，根据arco-design官方文档来确定，该属性会透传到组件 |
| key | string | 当搜索项 key 值不为 field时，可以通过key来指定 |
| order | number | 搜索框的排序，从小到大一次排列 |
| options | DataProps[] | 渲染查询条件的数据,select 或者 cascader |
| defaultValue | string | number | boolean | 搜索框默认值 |
| mode | RangePickerType | 时间选择器为范围选择器时，范围选择器类型 |
| shortcuts | ShortcutType[] | 时间选择器，快捷时间 |
| custom | boolean | 是否自定义查询条件内容 |
| span | number | 搜索列占的栅格数 |
| offset | number | 搜索列偏移栅格数 |
| treeProps | TreeOptions | 列表左侧树形结构,需要时可以自行补充 |
| render | (scope: SearchRenderScope) => VNode | 自定义搜索内容渲染（tsx语法） |
Slots
| 插槽名 | 描述 | 参数 |
|---|---|---|
| title | 标题 | string |
| sub-title | 子标题 | string |
| tree | 树Tree,isSplit时有效 | TreeData |
| extra | 自定义查询条件操作按钮 | -- |
| custom | 自定义查询条件 | -- |
| header-left | 表头左侧区域内容 | selectedList:tableData[],selectedListIds:(string | number)[],sSelected:boolean |
| header-right | 表头右侧区域内容 | selectedList:tableData[],selectedListIds:(string | number)[],sSelected:boolean |
| expand-row | 自定义扩展行 | -- |
更多插槽，根据项目columns配置的slotName、titleSlotName定义。
Events
| 方法名 | 描述 | 参数 |
|---|---|---|
| expandedChange | 展开行变化回调 | string[] |
| search | 查询按钮回调 | -- |
| reset | 重置按钮回调 | -- |
Expose
| 名称 | 参数 | 返回值 | 说明 |
|---|---|---|---|
| searchParam | -- | -- | 查询参数 |
| element | -- | MTableInstance | table实例 |
| tableData | -- | tableData[] | 表格数据 |
| pageable | -- | Pagination | 表格分页配置 |
| treeNode | -- | TreeNodeData | treeData |
| isSelected | -- | boolean | 是否选中了数据行 |
| selectedList | -- | tableData[] | 选中的数据行 |
| selectedListIds | -- | (string|number)[] | 选中的数据行主键 |
| activeRowkeys | -- | (string|number)[] | 展开行主键 |
| getTableList | -- | -- | 查询表格数据Event |
| reset | -- | -- | 重置表格数据 |
| clearSelection | -- | -- | 清除表格选中状态 |
| handleCurrentChange | current | number | 页码变化 |
| handleSizeChange | pageSize | number | 分页变化 |