前言
大家在使用过程中发现任何问题或者有更好的想法，都可以在下方评论区留言，或者在我的项目issues中提出。如果认为这对您有所帮助，请帮我点一下star❤️。
一、在线预览
Link:m-admin.cn/login
相关文档：doc.m-admin.cn
二、Git仓库地址
Gitee:gitee.com/sina_xys/..…
Github:github.com/sina-xys-fe…
三、功能特性
MTable组件采用的是属性透传的方式，同时也提供了一些常用属性的默认配置，支持所有原生表格参数、事件、插槽，同时增强了部分功能。
- 表格自适应屏幕的宽高，溢出内容则在表格内部滚动。
- 表格搜索、重置、分页等hooks封装(每个组件实现逻辑分离)
- 表格操作Hooks封装(表格搜索、查询参数组装、分页组件联动)
- 表格数据列Hooks封装(表格选中、单选、多选)
- 表格支持静态数据
- 表格配置支持多级Props
- 表格内容单元格内容格式格式化、自定义等。
- 表格查询条件、单元格支持自定义内容渲染(插槽、Tsx语法)
- 表格搜索条件支持记忆功能配置
- 表格分栏配置
四、表格设计分析
表格共分为四个区域
- 1.表格标题及搜索区域
- 2.表格数据操作及其他功能区域
- 3.表格数据内容区域
- 4.表格分页区域
效果图
1、表格标题及搜索区域内容分析
表格标题固定存在于表格中
搜索区域的字段在配置表格columns时进行指定，根据指定column的search进行配置(需要查询的字段与展示属性不一致时，需要指定key)，每个表格的搜索、重置实现逻辑完全封装在Hooks里，页面不需要手动去实现，只需配置表格即可。
表格搜索项可使用 tsx 组件自定义渲染
2.表格数据操作及其他功能区域分析
共分为表格数据操作、其他功能区域，flex布局，分别置于左右两侧，每个表格的按钮基本不一致，所以使用插槽进行实现。
作用域插槽 可以将表格多选数据信息传到页面上使用。selectedList(当前选择的数据)、selectedListIds(当前选择数据的key)、isSelected(是否选中)。
3.表格数据内容区域
该区域主要是展示数据内容，其中单元格可以通过指定columns中的slotName进行自定义配置。
4.表格分页区域
分页区域主要实现分页的操作，基于原生组件进行二次封装。
五、MTable API
table 原生API可以到ArcoDesign中查看
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 | 分页变化 |
六、 基本使用及Hooks
1.代码实现
代码较多，具体代码可以参考文档或在项目里查看。
2.常用Hooks函数
UseTable
useSelect
MTable使用
七、最后
七、最后
项目目前还在持续更新中，欢迎您的参与，我们共同努力维护和改进它。有任何问题或者意见，欢迎在我的项目提Issues。
