论ant design 组件库踩过的那些坑

987 阅读2分钟

---- 作者正在写react的项目,正在踩ant design组件库的坑

微信截图_20211209161650.png

坑一:

Table表格的坑,当你领导一定要你写出这么个表格禁用的需求来,你该怎么办,

在你不了解Table表格的具体配置属性时,一定要翻看文档,因为文档中一定有你不知道不熟知的一些配置,尤其是像我们这些刚刚毕业或者是刚接触前端不久的一些工作或者实习生们来说(作者有一个建议,如果你会Vue,千万不要选择进react的坑来,虽然react真的很锻炼人,但是我只能说,它底层的坑真的很多)

微信截图_20211209162319.png

对于新手来说,可能知道table表格有一个配置是设置表格前面的复选框的,加上那个属性他就有前面的复选框,去掉他就没有,但是具体怎么禁用,刚开始肯定是不知道的,于是乎,我翻阅了很久的文档,在ProTable的配置中循环反复的找了很久,都没有发现怎么设置这里的禁用项,到后面,想到了Table的配置属性,终于皇天不负有心人,让我找到了这个属性,

rowSelection 中的getCheckboxProps

微信截图_20211209162256.png

微信截图_20211209163522.png

ProTable是Table的升级版,所以Table的属性在ProTable中一定是适用的,在这个配置项中我们可以单独设置需要禁用的项。 具体rowSelection有哪些配置项,我都贴图在这里了,想要具体的了解每一项的哪些属性和作用,请看官网

--- ant design 官网Table中的rowSelection ant.design/components/…

这里我再说一下升级版ProTable的好处,我这里只说一个它自带刷新的好处,当然,他还有很多比Table多出的一些属性,具体的大家可以再去官网查看,这里不再做详细的解释和说明

微信截图_20211209163831.png

有关上图中我也用了表格自带的刷新功能,ActionRef,手动刷新表格,当我们对表格进行了一些删除添加操作的时候,我们需要刷新表格已获得表格的最新数据,如果没有刷新的功能,可能我们需要手动去写一个方法去刷新表格的数据,来获得我们想要的效果

自带的表格刷新,可以为我们简单方便的处理这些问题,不需要我们再去写一些方法

坑二:关于表单中Form的必填标识怎么切换为我们想要的标识

微信截图_20211209164446.png

比如说,这里前面的*的标识我们怎么去换掉我们想要的标识,并且还不影响表单的必填性质

..............极速更新中