前端小白日常踩坑 uniapp uni-indexed-list 全选

858 阅读1分钟

项目是uniapp需要做一个带索引的多选列表 刚好在uni的扩展组件找到了uni-indexed-list这个索引列表;

经过俩分钟的观看直接上手,按照文档快速完事,但是需求有个全选功能,可是组件介绍中我并没有找到相关信息,我的第一反应是百度看看,然而也并没有找到。

好吧那只能看源码了;在uni-modules文件夹中找到对应的uni-indexed-list下面的components,一幕了然我需要找的就是这个item子组件;

1673317175137.png

我们可以清晰的看到它是遍历list.items,根据其中的checked来判断是否选中,那这样解决办法就来了;

1673317359020.png

  1. 给uni-indexed-list组件设置ref属性;

image.png

2.在全选方法中通过$refs拿到组件中的list,从而遍历去改变items里的checked值;

image.png

最后也是完美解决了全选这个问题;