目录
一、需求
二、问题
编辑三、解决
四、全选选中所有数据而不是当前页
一、需求
最近遇到一个小小的需求,在我们这个项目中,有一个表格需要添加全选删除功能。这还不简单吗,于是我找到andt的官网,咔咔咔一顿cv,很快就把这个功能加上了,信心满满的开始自测,但是却发现了一些问题。
二、问题
1.点击全选,只会选择当前页的所有选项,并且后年几页也会被选上,但选中数组中并不包含,第二页的选项,第二页的选项仍然会被勾选上。 这里数组长度只有10,但页面显示全部选择。
2. 选择第一页的第一项,后续所有分页的第一项都会被勾选。
3.获取的数组为对应的数据的索引下标,没有办法分辨数据。
三、解决
实际上问题只有一个,那就是没有加对应的标识 rowKey 。少了这个玩意从而导致了包括但不限于以上的这些问题。
还是没有好好看文档啊, 这样一设置,所有的问题都迎刃而解了。
注意这里的 record.xx 是对应的行的某一项属性的属性值。在这里设置以后,获取的数组的内容就是对应的属性值了。
看这里已经从索引下标变成了ID。到此为止,上面的三个问题都得到了相对应的解决。
四、全选选中所有数据而不是当前页
在andt-table组件中的全选只是针对于当前页面的全选,如果想实现全部数据选取就需要加一个方法。
可以在这里通过判断 selected 来将所有数据的rowkey值添加到数组中达到实现目的。