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 | 分页变化 |