咨询电话:
15628812133
04
2023/08

vantUI通过二级选择器控制一级的选中状态

发布时间:2023-08-04 17:45:12
发布者:MaiMai
浏览量:
0

上一篇我们已经利用van-checkbox成功实现一级选择器控制二级全选的功能,点击此链接>>查看。

接下来需要实现当取消任意一个二级选择器的选中状态(即取消全选状态时),一级选择器也同步取消。

首先给二级选择器添加click事件,同样,不要给复选框组添加change事件,避免一级选择器选中状态变化时change事件会一直触发。

DOM结构

复选框组通过 v-model 数组绑定复选框的勾选状态,通过name控制数组中存的值。

在checkLeader方法中编译如下:

执行方法

Map函数循环二级选择器,由于二级选择器的选中状态是由memberShip数组决定的,而memberShip数组中存的是选中选择器的id,只要有选择器的id没有出现在复选框组绑定的选中项数组中,便取消一级选择器的选中状态;循环记录数组存在的id,若数量与二级选择器的数量相同则设置一级选择器为选中状态。

最后效果如图所示:

实现效果

返回列表