antd protable 的一些配置记录

官网：https://procomponents.ant.design/components/table

一、请求

1、直接使用request

egg:

request={async (params: Record<string, any>) => {const {keyword, // 一些自定义的搜索字段current,//当前页数...res} = params;const newSearchParams = {page: current,keyword,};setSearchParams(newSearchParams);//可以直接 return fetchSearchList(newSearchParams)//也可以如下分开来写const result = await fetchSearchList(newSearchParams);//请求return {data: result.data,total: result.total,success: true,};}}

2、使用onSubmit配合dataSource

             const [ListSource, setListSource] = useState<any>();const [searchParams, setSearchParams] = useState<any>();useEffect(() => {fetchSearchList({ page: 1, pageSize: 10, ...searchParams }).then(res => {if (res.code === 200) {setListSource(res.data)}})}, [searchParams])<ProTabledataSource={ListSource}onSubmit={(params: Record<string, any>) => {const {keyword,current} = params;const newSearchParams = {page: current,keyword,};setSearchParams(newSearchParams);}}/>

二、search表单的一些配置

          search={{labelWidth: 'auto', //默认80，有时候字段多的时候显示不全，可改为 autocollapsed: false, // 是否收起span: 6, // span默认一行显示三列，通过调整span调整显示多少列}}

三、headerTitle 和 toolBarRender

headerTitle={<Space><span>Basic Table</span><Select<string>bordered={false}value={intl}onChange={(value) => {dayjs.locale(intlMap[value].locale);setIntl(value);}}options={Object.keys(intlMap).map((value) => ({ value, label: value }))}/></Space>}toolBarRender={() => [<Button key="3" type="primary"><PlusOutlined />New</Button>,]}

四、scroll配置

    <ProTablescroll={{ x: 1600 }} //可视宽度，超过会显示滚动条/>

五、刷新表单，重置表单 ActionRef

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

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.reloadAndRest();// 重置到默认值，包括表单
ref.current.reset();// 清空选中项
ref.current.clearSelected();// 开始编辑
ref.current.startEditable(rowKey);// 结束编辑
ref.current.cancelEditable(rowKey);

六、form表单纯空格校验

//whitespace: true 不能输入纯空格符<Form.Itemlabel="主题"name="theme"rules={[{ required: true, message: '请输入主题', whitespace: true }]}><Input placeholder="请输入主题" /></Form.Item>

antd protable 的一些配置记录相关推荐

Ubuntu16.04 配置记录（持续更新）
Ubuntu16.04 配置记录 1.安装中文输入法 https://www.cnblogs.com/darklights/p/7722861.html 2.修改终端命令行路径长度 https://b ...
vscode配置记录
vscode配置记录按照官网教程安装好vs:实际上只需要配置launch.json的"program"如下所示 "configurations": [{&qu ...
openNebulafrontEnd ComputeNode 配置记录
openNebulafrontEnd ComputeNode 配置记录 1,OpenNebula nfs(file system shared) for image datastore; openNe ...
mysql slave 配置_【mysql5.6】数据库主从（Master/Slave）配置记录
freddon 发表于2018-04-01 阅读 661 | 评论 0 前一段时间迫于服务器的捉急内存,将redis数据库停掉了,鉴于redis的主从配置,在centos配置下mysql记录下过程. ...
webpack4.0配置记录（2）
接上一篇webpack4.0配置记录(1),继续记录学习webpack配置. 定义环境变量 new Webpack.DefinePlugin({//用来定义全局环境变量DEV:JSON.stringi ...
CentOS 6.6下Redis安装配置记录
这篇文章主要介绍了CentOS 6.6下Redis安装配置记录,本文给出了安装需要的支持环境.安装redis.测试Redis.配置redis等步骤,需要的朋友可以参考下在先前的文章中介绍过redis ...
Bandwagon的配置记录(二) —— ftp文件传输
SSH登录服务器登录的方法在Bandwagon的配置记录(一) -- kexue上网配置前的准备 1.新建一个目录( /home/ftp ),以后可以把文件放在这里,这里相当于是个中转站 cd ...
【非原创】Ubuntu14.04+cuda6.5+opencv2.4.9+caffe配置记录
Ubuntu14.04+cuda6.5+opencv2.4.9+caffe配置记录从4月5日差不多开始安装,到今天4月15日,快两个星期了.如果加上之前自己看点Linux的时间,这折腾的有两个星期( ...
Ubuntu20.04安装与配置记录
Ubuntu20.04安装与配置记录原文地址:Ubuntu20.04安装与配置记录一.Ubuntu系统盘制作 1.1 Windows环境下制作系统盘下载Ubuntu系统,选择桌面版. 下载工具系 ...

antd protable 的一些配置记录

一、请求

1、直接使用request

2、使用onSubmit配合dataSource

二、search表单的一些配置

三、headerTitle 和 toolBarRender

四、scroll配置

五、刷新表单，重置表单 ActionRef

六、form表单纯空格校验

antd protable 的一些配置记录相关推荐

最新文章

热门文章