Antd-table全选踩坑记录

目录

一、需求

二、问题

​编辑三、解决

四、全选选中所有数据而不是当前页


一、需求

        最近遇到一个小小的需求,在我们这个项目中,有一个表格需要添加全选删除功能。这还不简单吗,于是我找到andt的官网,咔咔咔一顿cv,很快就把这个功能加上了,信心满满的开始自测,但是却发现了一些问题。

二、问题

        1.点击全选,只会选择当前页的所有选项,并且后年几页也会被选上,但选中数组中并不包含,第二页的选项,第二页的选项仍然会被勾选上。          这里数组长度只有10,但页面显示全部选择。

        2. 选择第一页的第一项,后续所有分页的第一项都会被勾选。

         3.获取的数组为对应的数据的索引下标,没有办法分辨数据。

三、解决

        实际上问题只有一个,那就是没有加对应的标识  rowKey  。少了这个玩意从而导致了包括但不限于以上的这些问题。

           还是没有好好看文档啊, 这样一设置,所有的问题都迎刃而解了。

         注意这里的  record.xx  是对应的行的某一项属性的属性值。在这里设置以后,获取的数组的内容就是对应的属性值了。

         看这里已经从索引下标变成了ID。到此为止,上面的三个问题都得到了相对应的解决。

四、全选选中所有数据而不是当前页

        在andt-table组件中的全选只是针对于当前页面的全选,如果想实现全部数据选取就需要加一个方法。

        可以在这里通过判断  selected  来将所有数据的rowkey值添加到数组中达到实现目的。

猜你喜欢

转载自blog.csdn.net/qq_45799465/article/details/128948247