M-AdminM-Admin
首页
指南
  • MTable
  • MForm
  • MTinymce
  • 季度选择器
  • MSearchForm
  • 预览地址
  • Gitee源码
  • Github源码
  • 更新日志
捐赠
首页
指南
  • MTable
  • MForm
  • MTinymce
  • 季度选择器
  • MSearchForm
  • 预览地址
  • Gitee源码
  • Github源码
  • 更新日志
捐赠
  • 指南

    • 介绍
    • 快速上手
    • 目录结构
    • 路由、菜单
    • 权限管理
    • 系统配置
  • 进阶

    • 网络请求
    • 国际化配置
    • Hooks
    • Store
    • TSX 支持
  • 组件教程

    • MTable
    • MForm
    • MTinymce
    • 季度选择器
    • MSearchForm
  • 其他

    • 项目代码规范
    • 常见问题

MTable

MTable 是基于arco-design-vue的表格二次封装的 Table 组件, 支持所有原生表格参数、事件、插槽,同时增强了部分功能。

使用示例

由于篇幅问题,具体使用场景请查看github。

Props

属性名类型描述默认值
columnsColumnProps[]列的配置项,即表头显示内容,必填-
dataTableData[]静态data-
requestApi(param: {key:string}:unknown) => Promise<AxiosResponse<Result<T>>>请求表格的api, AxiosResponse ==> Result-
requestAutoboolean是否自动查询-
dataCallback(data: {key:string}:unknown) => P返回数据的回调函数,可以对数据进行处理-
isSplitboolean是否需要拆分布局,左右布局的形式-
spanSplitnumber左边部分占多少栅格数,共24等分-
splitLineboolean是否需要分隔线-
titlestring表格标题,在表格打印的时候用-
subTitlestring子标题(分隔时,左边块的标题),需配合isSplit使用-
initParam{key:string}:unknown初始化参数-
paginationboolean是否需要分页组件true
borderedboolean是否需要表格纵向边框false
stripeboolean是否开启斑马纹false
toolButtonboolean是否显示表格功能按钮,打印和导出功能true
selectIdstring当表格数据多选时,所指定的 idid
isExpandTableExpandable | boolean是否显示展开列信息-
isRowSelectionRowSelectionType | TableRowSelection | boolean是否可以选择行-
isTreeTableboolean是否是树形表格,默认为false。如果是树形表格则需要配置该项。注意:每行下面会有一块占位spanfalse
xScrollnumber | string | booleanx轴滚动的距离,如果是boolean是boolean,则使用默认值-
fillRowsboolean是否填充空行-
isSetboolean是否需要设置最小行高,配合fillRows使用,如果为 false 则要自行处理样式问题-
isChildrenboolean是否展示左边的展开图标-
expandedRowKeysstring[]树形表格,设置默认展开的值-
rememberboolean用户配置是否记录查询条件的内容true
tableShowboolean是否展示表格true

ColumnProps

属性名类型描述
enum{key: string}: unknown--
searchSearchProps--
extraAlias--

SearchProps

属性名类型描述
elSearchType当前搜索框的类型
isShowboolean搜索列是否可见
props{key: string}: unknown搜索项参数或者属性,根据arco-design官方文档来确定,该属性会透传到组件
keystring当搜索项 key 值不为 field时,可以通过key来指定
ordernumber搜索框的排序,从小到大一次排列
optionsDataProps[]渲染查询条件的数据,select 或者 cascader
defaultValuestring | number | boolean搜索框默认值
modeRangePickerType时间选择器为范围选择器时,范围选择器类型
shortcutsShortcutType[]时间选择器,快捷时间
customboolean是否自定义查询条件内容
spannumber搜索列占的栅格数
offsetnumber搜索列偏移栅格数
treePropsTreeOptions列表左侧树形结构,需要时可以自行补充
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--MTableInstancetable实例
tableData--tableData[]表格数据
pageable--Pagination表格分页配置
treeNode--TreeNodeDatatreeData
isSelected--boolean是否选中了数据行
selectedList--tableData[]选中的数据行
selectedListIds--(string|number)[]选中的数据行主键
activeRowkeys--(string|number)[]展开行主键
getTableList----查询表格数据Event
reset----重置表格数据
clearSelection----清除表格选中状态
handleCurrentChangecurrentnumber页码变化
handleSizeChangepageSizenumber分页变化
最近更新:: 2025/6/20 03:53
Contributors: xuyp
Next
MForm