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. 默认值
    antDesign v4之Pro-Table实用细节_第1张图片
    在官网的列子里都是写的请求,没有显示默认值
    但是官网开头的第一句
    antDesign v4之Pro-Table实用细节_第2张图片
    所以默认值还是dataSource
    antDesign v4之Pro-Table实用细节_第3张图片

  2. 默认PageSize
    Protable和table一样,日过没有设置pagesize,默认是20,如果仅修改默认时的值则
    antDesign v4之Pro-Table实用细节_第4张图片
    标签上设置api即可

     pagination={{ defaultPageSize: 10 }}
    
  3. current更新
    按照以前(我个人)的pagination写法

    在render里写pagination,然后current和pageSize各自绑在state里面。
    每次修改state里的current就可以了,页面就到相应的页面了
    antDesign v4之Pro-Table实用细节_第5张图片
    antDesign v4之Pro-Table实用细节_第6张图片
    但是现在没有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,查询表单就直接生成了
    antDesign v4之Pro-Table实用细节_第7张图片
    然后columns里的每一项 都在查询里列表里

    <1> 配置不显示:

    antDesign v4之Pro-Table实用细节_第8张图片
    在对应项配置属性=》 hideInSearch:true

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

    项目的需求,会在查询的时候是Select选择。
    Protable有这一种类型选择:
    在这里插入图片描述
    antDesign v4之Pro-Table实用细节_第9张图片
    它会在生成下拉框查询列表的同时,会给表头也生成filter筛选
    如果不需要,且不显示filter的图标
    antDesign v4之Pro-Table实用细节_第10张图片
    在对应的参数设置属性filters: []

  5. Protable生成新建/更新表单
    这里的createForm是下载demo就有的,我把title变成传入的
    antDesign v4之Pro-Table实用细节_第11张图片
    <1> 用Protable生成form,直接把type赋值为“form”,但是请求table数据就可以了

antDesign v4之Pro-Table实用细节_第12张图片
<2> 更新的流程:

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

antDesign v4之Pro-Table实用细节_第13张图片
antDesign v4之Pro-Table实用细节_第14张图片
<3>提交时,不包含该字段:

设置key为空

antDesign v4之Pro-Table实用细节_第15张图片
原则:赋值是根据dataIndex,提交时是根据key
<4>自定义在form里生成table
antDesign v4之Pro-Table实用细节_第16张图片
<5>column不能自动更新(默认值的更新)
如果对于column里某个默认值的更新,并不会更新进去
只有对于整个column更新才行(和pagination一个道理)
此时对于默认值的更新 取传入数据的参数
antDesign v4之Pro-Table实用细节_第17张图片
<6>仅生成表单
antDesign v4之Pro-Table实用细节_第18张图片

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

你可能感兴趣的:(antd,react,web前端)