ProComponents ProTable - 高级表格的使用

用户5815329149464
8,599 阅读5分钟

API通过首字母排序

actionRef --操作 table

Table action 的引用，便于自定义触发 .

有时我们要手动触发 table 的 reload 等操作，可以使用actionRef，可编辑表格也提供了一些操作来帮助我们更快的实现需求。

TS类型

interface ActionType {
  reload: (resetPageIndex?: boolean) => void;
  reloadAndRest: () => void;
  reset: () => void;
  clearSelected?: () => void;
  startEditable: (rowKey: Key) => boolean;
  cancelEditable: (rowKey: Key) => boolean;
}

用法

const ref = useRef<ActionType>();

<ProTable actionRef={ref} />;

参数

//重新刷新表格
ref.current.reload()         
//重置表格
ref.current.reset()     
//刷新并清空,页码也会重置，不包括表单 
ref.current.creloadAndRest()  
//清空选中项
ref.current.clearSelected()         
//开始编辑
ref.current.startEditable(rowkey)    
//结束编辑
ref.current.cancelEditable(rowKey)

beforeSearchSubmit -- 搜索前

搜索之前进行一些修改

cardBordered -- 边框

为false，则Table 和 Search 外围 Card 组件的边框全不没有

如果为{}，则通过search, table来分别控制边框

columnEmptyText --空值显示

空值时的显示，不设置时显示 -， false 可以关闭此功能

columnsState --列的显示隐藏

受控的列状态，可以操作显示隐藏，

可以用默认隐藏一些列，通过存储浏览器来保存显示哪些列

属性描述类型默认值
defaultValue列状态的默认值，只有初次生效Record;-
value列状态的值，支持受控模式Record;-
onChange列状态的值发生改变之后触发(value:Record)=>void-
persistenceKey持久化列的 key，用于判断是否是同一个 table`stringnumber`-
persistenceType持久化列的类类型， localStorage 设置在关闭浏览器后也是存在的，sessionStorage 关闭浏览器后会丢失`localStoragesessionStorage`-

defaultData -- 默认数据

用于填写默认数据,在没有数据的时候显示。

defaultSize --默认size

默认的 size，三种大小“large”,"middle","small"。

dateFormatter -- 改时间格式

转化 moment 格式数据为特定类型，false 不做转化

三种格式可选（时间格式可自己设置）

1.string

2.number

//3.使用自定义函数进行日期格式化
 dateFormatter={(value, valueType) => {
          console.log('====>', value, valueType);
          return value.format('YYYY-MM-DD HH:mm:ss');
 }}

dataSource -- Table数据

Table 的数据，protable 推荐使用 request 来加载

debounceTime -- 防抖时间

防抖时间-默认为10

editable --编辑表格

可编辑表格的相关配置 (暂时不说明)

ErrorBoundary --错误处理

自带了错误处理功能，防止白屏，ErrorBoundary=false 关闭默认错误边界

form --表格

antd form 的配置

formRef --查询表单的form示例

可以获取到查询表单的 form 实例，用于一些灵活的配置

操作自带的 form

用法：

import type { ProColumns, ProFormInstance } from '@ant-design/pro-components'

const ref = useRef<ProFormInstance>();
<ProTable formRef={ref}/>

参数

//查询表单赋值
ref.current.setFieldsValue()
//查询提交表单
ref.current.submit()
...(和form参数一样)

manualRequest --首次触发

是否需要手动触发首次请求, 配置为 true 时不可隐藏搜索表单 ，默认false，设置后requst中的请求不会主动触发。

onDataSourceChange --数据改变触发的函数

Table 的数据发生改变时触发 ,可编辑表格修改数据的改变。

onLoad --加载

数据加载完成后触发,会多次触发

onLoadingChange --loading修改

loading 被修改时触发，一般是网络请求导致的

onRequestError -- 加载触发

数据加载失败时触发

onReset --重置表单

重置表单时触发

onSizeChange --改变尺寸

table 尺寸发生改变

onSubmit --提交表单

提交表单时触发

options -- table工具栏

table 工具栏，设为 false 时不显示.传入 function 会点击时触发


type OptionConfig = {
    //控制密度按钮
    density?: boolean;
    //全屏按钮
    fullScreen?: OptionsType;
    //刷新按钮
    reload?: OptionsType;
    //列设置
    setting?: boolean | SettingOptionType;
    //搜索 为ture时，点击搜索框，触发requset，如果 onSearch 返回一个	false，直接拦截请求
    search?: (OptionSearchProps & {
        name?: string;
    }) | boolean;
}
//列设置参数
type SettingOptionType = {
    //是否拖动排序
    draggable?: boolean;
    //是否隐藏列
    checkable?: boolean;
    //重置按钮
    checkedReset?: boolean;
    //列表高度
    listsHeight?: number;
    //补充组件
    extra?: React.ReactNode;
    //列设置按钮
    children?: React.ReactNode;
};

params -- 重新加载

用于 request 查询的额外参数，一旦变化会触发重新加载

postData -- 数据处理

对通过 request 获取的数据进行处理

requset查询表单

获取dataSource的方法，简单来说是渲染数据的方法，可以做查询表单数据。

requse是一个箭头函数。函数内有三个参数 params,sort,filter,

可以return一个函数或者一个对象.如果是对象必须要有data,success,total

params

params 一定会有pageSize和 current，这两个参数是 antd 的规范 ,还有你自己筛选的条件。

sort

分类

filter

过滤

用法：

<ProTable<DataType, Params>
  // params 是需要自带的参数
  // 这个参数优先级更高，会覆盖查询表单的参数
  params={params}
  request={async (
    // 第一个参数 params 查询表单和 params 参数的结合
    // 第一个参数中一定会有 pageSize 和  current ，这两个参数是 antd 的规范
    params: T & {
      pageSize: number;
      current: number;
    },
    sort,
    filter,
  ) => {
    // 这里需要返回一个 Promise,在返回之前你可以进行数据转化
    // 如果需要转化参数可以在这里进行修改
    const msg = await myQuery({
      page: params.current,
      pageSize: params.pageSize,
    });
    return {
      data: msg.result,
      // success 请返回 true，
      // 不然 table 会停止解析数据，即使有数据
      success: boolean,
      // 不传会使用 data 的长度，如果是分页一定要传
      total: number,
    };
  }}
/>

revalidateOnFocus -- 聚焦

窗口聚焦时自动重新请求

search--搜索表单

是否显示搜索表单，传入对象时为搜索表单的配置

为false不显示

filterType过滤表单类型'query''light''query'
searchText查询按钮的文本string查询
resetText重置按钮的文本string重置
submitText提交按钮的文本string提交
labelWidth标签的宽度'number''auto'80
span配置查询表单的列数'number''ColConfig'defaultColConfig
className封装的搜索 Form 的 classNamestring-
collapseRender收起按钮的 render(collapsed: boolean,showCollapseButton?: boolean,) => ReactNode-
defaultCollapsed默认是否收起booleantrue
collapsed是否收起boolean-
onCollapse收起按钮的事件(collapsed: boolean) => void;-
optionRender自定义操作栏((searchConfig,formProps,dom) => ReactNode[])false-
showHiddenNum是否显示收起之后显示隐藏个数booleanfalse

tableClassName -- 类名

封装的 table 的 className

tableExtraRender-- 自定义表格的主体函数

自定义表格主体函数

tableRender -- 自定义渲染表格函数

自定义渲染表格主体

tableStyle -- 样式

封装的 table 的 style

toolbar

透传 ListToolBar 配置项

参数说明
title标题
subTitle子标题
description描述
search查询区
actions操作区
settings设置区
filter过滤区，通常配合 LightFilter 使用
multipleLine是否多行展示，默认false
menu菜单
tabs标签页配置，仅当 multipleLine 为 true 时有效

toolBarRender --工具栏

渲染工具栏，支持返回一个 dom 数组，会自动增加 margin-right

type --类型

pro-table 类型 'form' ， 'list' ， 'descriptions' ， 'table' ， 'cardList' |，undefined

avatar
文章
阅读
粉丝