ProTable 数据表格

TIP

• ProTable 基于 Shineout Table 是一个 Schema 驱动的配置化表格组件，传入 columns 定义列、request 提供数据源，即可渲染带分页、工具栏、行操作的完整数据表格。

// 设置全局分野大小
import { setConfig } from "@yl_lowcode/pro-shineout";

setConfig({
  defaultPageSize: 10,
});

基本使用

配置工具栏以及操作列

配置本地持久化列设置

配置多 tabs

静态数据过滤

API

ProTableProps 继承 Table 额外的属性描述

属性名	描述	类型	默认值	是否必需
filterKey	配置列过滤唯一标识	string	无	否
columns	列信息	ProTableColumnProps[]	无	否
request	统一数据请求	(params: any, sort: any) => Promise<{count: number;list: any[]}>	无	否
tableRef	table 实例	RefObject<ProTableRef>	无	否
tools	工具配置	ToolProps[]	无	否
rowOperations	操作列配置	{width: string ｜ number; menus: MenuProps[]}	无	否
autoNo	展示序号	boolean	无	否
useRefresh	是否开启刷新	boolean	true	否
title	标题	ReactNode	无	否

ProTableColumnProps 继承 ColumnItem 额外的属性描述

属性名	描述	类型	默认值	是否必需
tooltips	提示信息	ReactNode	无	否
checked	是否默认过滤改列	boolean	无	否
disabledChecked	是否允许过滤	boolean	无	否
enums	枚举	any	无	否
dateFormat	日期转换	string	无	否
useThousandth	千分位	number	无	否
staticFilter	开启静态过滤	boolean	true	否
staticFilterOptions	自定义过滤数据	any	无	否

ProTableRef

属性名	描述	类型	默认值	是否必需
refresh	刷新	Function	无	否
search	查询	Function	无	否
resetFilter	重置过滤	Function	无	否
data	数据源	any	无	否

MenuProps 继承 ProButton 额外的属性描述

属性名	描述	类型	默认值	是否必需
label	标签名	string	无	否
confirm	二次确认	string ｜ ((record: any) => string)	无	否
disabled	是否禁用	boolean ｜ (({ record: any; index: number }) => boolean)	无	否
visible	是否展示	boolean ｜ (({ record: any; index: number }) => boolean)	无	否
onClick	点击	({record: any; refresh?: Function; search?: Function; params: any }) => void	无	否

ToolProps 继承 ProButton 额外的属性描述

属性名	描述	类型	默认值	是否必需
icon	图标	string	无	否
label	标签名	string	无	否
onClick	点击	({refresh?: Function; search?: Function; params: any }) => void	无	否
disabled	是否禁用	({ data, tabKey }) => boolean	无	否