宁波网站建设公司名单推荐,网站建设列表,网页培训哪个机构好,怎么做网站空间最近在公司接收到了一个需求#xff0c;给收藏夹的书籍添加批量、全选删除实现思路#xff1a;点击全选改变item的checked#xff0c;改变item的checked#xff0c;重新便利一下所有item的checked来改变全选的selectAll1#xff09;该组件基本功能已经实现#xff0c;che… 最近在公司接收到了一个需求给收藏夹的书籍添加批量、全选删除实现思路点击全选改变item的checked改变item的checked重新便利一下所有item的checked来改变全选的selectAll1该组件基本功能已经实现checkbox用的vant-ui苦于官网没有这样功能的demo我按照上面的思路实现但头疼的是他只有change事件也就是说在实现全选改变item的checked的时候会触发item的change同时item的change会触发全选的change里面的事件从而就无限循环了2用原生的用click代替change事件3使用el-checkbox还好项目也用了element-ui 查了一下实现方案,虽然对他的val有点疑问注意el-checked绑定的数据要在data里面一开始就有不能后期追加会导致有时候点击失效哈哈哈~~ el-checkbox v-modelselectAll changeselectAllFunc/el-checkbox
el-checkbox v-modelitem.checked changeselectProduct/el-checkbox
selectProduct(val) {for(let i 0,len this.collectionlist.length;i len;i ){if(!this.collectionlist[i].checked){this.selectAll false;return false;}}this.selectAll true;
}
selectAllFunc(val){this.collectionlist.map((item,i){item.checked val;})
}
