antDesign v4之Pro-Table实用细节

先上ProTable 的文档官网：https://protable.ant.design/api

最近在antd升到v4版本，发现了这个组件高使用率
但是文档不够齐全（或许是我没仔细看）有些隐藏技能需要看源码
用熟练了真的很好用

问题目录：（文章较长有需要的入）

1.默认值
2.默认PageSize
3.current更新
4.Protable生成查询表单
…<1>配置不显示：
…<2> 查询时是Select，表头不显示筛选
5.Protable生成新建/更新表单
…<1>生成表单
…<2>更新的流程
…<3>提交时，不包含该字段
…<4>自定义在form里生成table
…<5>column不能自动更新
…<6>仅生成表单

默认值

在官网的列子里都是写的请求，没有显示默认值
但是官网开头的第一句

所以默认值还是dataSource
默认PageSize
Protable和table一样，日过没有设置pagesize,默认是20，如果仅修改默认时的值则

标签上设置api即可
```
 pagination={
      
      {
      
       defaultPageSize: 10 }}
```
current更新
按照以前（我个人）的pagination写法

在render里写pagination，然后current和pageSize各自绑在state里面。
每次修改state里的current就可以了，页面就到相应的页面了

但是现在没有render，我写成（*~~错误写法~~ *）
```
	<ProTable
      columns={
      
      columns}
      rowKey={
      
      record => record.platformId}
      pagination={
      
      {
      
       defaultPageSize: 10,current }}
    />
```
把current单独用state声明然后用useState修改
结果：state里的current的确变化了，但是pagination里面没有变。
***正确做法 ：
```
	<ProTable
      columns={
      
      columns}
      rowKey={
      
      record => record.platformId}
      pagination={
      
      {
      
       pagination }}
    />
```
应该更新整个pagination

这样才会更新
其实老版也是这个原理，更新了整个pagination，是自己没有掌握到精髓
Protable生成查询表单
这次Protable对于table的在一层的封装真的很符合实际需求
平常对于table的表单，正常情况下都是对于column的项进行查询
所以现在他们可以用column生成form（真的很妙啊！！）

写好了Protable，查询表单就直接生成了

然后columns里的每一项都在查询里列表里

<1> 配置不显示：

在对应项配置属性=》 hideInSearch:true

<2> 查询时是Select，表头不显示筛选

项目的需求，会在查询的时候是Select选择。
Protable有这一种类型选择:

它会在生成下拉框查询列表的同时，会给表头也生成filter筛选
如果不需要，且不显示filter的图标

在对应的参数设置属性filters: []
Protable生成新建/更新表单
这里的createForm是下载demo就有的，我把title变成传入的

<1> 用Protable生成form，直接把type赋值为“form”，但是请求table数据就可以了

在这里插入图片描述
<2> 更新的流程：

在操作点击更改的时候 将该条数据放在state里，然后赋值给个参数的initialValue:

在这里插入图片描述

<3>提交时，不包含该字段：

设置key为空

在这里插入图片描述
原则：赋值是根据dataIndex,提交时是根据key
<4>自定义在form里生成table

<5>column不能自动更新（默认值的更新）
如果对于column里某个默认值的更新，并不会更新进去
只有对于整个column更新才行（和pagination一个道理）
此时对于默认值的更新取传入数据的参数
在这里插入图片描述
<6>仅生成表单

对于Protable的总结持续更新中，有写的不对的地方给我留言哦~

antDesign v4之Pro-Table实用细节

问题目录：（文章较长 有需要的入）

猜你喜欢

问题目录：（文章较长有需要的入）