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>仅生成表单

---

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

2. 默认PageSize
   Protable和table一样，日过没有设置pagesize,默认是20，如果仅修改默认时的值则
   
   标签上设置api即可

    pagination={{ defaultPageSize: 10 }}
   

3. 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，是自己没有掌握到精髓

4. Protable生成查询表单
   这次Protable对于table的在一层的封装 真的很符合实际需求
   平常对于table的表单，正常情况下都是对于column的项进行查询
   所以现在 他们可以用column生成form（真的很妙啊！！）

   写好了Protable，查询表单就直接生成了
   
   然后columns里的每一项 都在查询里列表里

   <1> 配置不显示：

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

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

   项目的需求，会在查询的时候是Select选择。
   Protable有这一种类型选择:
   
   
   它会在生成下拉框查询列表的同时，会给表头也生成filter筛选
   如果不需要，且不显示filter的图标
   
   在对应的参数设置属性filters: []

5. 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的总结持续更新中，有写的不对的地方给我留言哦~