使用el-checkbox实现全选，点击失效没有反应

Binguner 发布于2019-08-23 12:29 / 1953人阅读

摘要：最近在公司接收到了一个需求，给收藏夹的书籍添加批量全选删除实现思路点击全选改变的，改变的，重新便利一下所有的来改变全选的该组件基本功能已经实现，用的，苦于官网没有这样功能的，我按照上面的思路实现，但头疼的是他只有事件，也就是说在实现全选改

最近在公司接收到了一个需求，给收藏夹的书籍添加批量、全选删除
实现思路：点击全选改变item的checked，改变item的checked，重新便利一下所有item的checked来改变全选的selectAll
1）该组件基本功能已经实现，checkbox用的vant-ui，苦于官网没有这样功能的demo，我按照上面的思路实现，但头疼的是他只有change事件，也就是说在实现全选改变item的checked的时候会触发item的change，同时item的change会触发全选的change里面的事件，从而就无限循环了
2）用原生的用click代替change事件
3）使用el-checkbox，还好项目也用了element-ui 查了一下实现方案,虽然对他的val有点疑问
注意：el-checked绑定的数据要在data里面一开始就有，不能后期追加，会导致有时候点击失效，哈哈哈~~



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;
  })
}

服务器托管私有云 java下载没有反应 linux挂载硬盘没有反应阿里云服务器没有反应 js实现按钮点击

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/98615.html

el-select 下拉框多选实现全选

摘要：还是看代码吧。。。部分请选择全选全选部分一一二二三三四四五五全选全选全选全选全选全选看看效果图方法二直接添加一个全选复选框，实现的功能跟方法一是一样的部分请选择全选部分一一二二三三四四五五效果图在写一个功能时发现el-select支持多选，但是竟然不支持全选，好无语哦，那就自己实现一下吧~有两种方法，第二种感觉简单些方法一：下拉项增加一个【全选】，然后应该有以下几种情况：下拉选...

Miyang 2019-08-26 10:30 评论0 收藏0
原生Js-msi系统

摘要：我也意识到在学习一个框架前，将框架的思想和原生的实现进行对比有多么重要。这个是目前为止一个大的框架思路，当然还要再进行每个功能的细分。表格将上一步的并集数据显示出来渲染分表格，表格有一个表头，用于展示商品的种类地区以及每月的销售情况。前言：由于刚入前端时间并不长，之前最近一直处在学习的阶段，现在准备找工作，回首看看之前学的，发现了很多的瑕疵。我分析觉得主要原因在于之前有些东西学的太快...

K_B_Z 2019-08-23 10:54 评论0 收藏0
原生js练习题---第二课（下）

摘要：最后，我们只要在事件处理程序中获得这个布尔值传给这几个函数就可以了，其中，全选框反选链接可以从全选框的属性获得这个值，而全体的复选框要获得就得靠遍历了。 0x1播放列表收缩展开实现效果值得注意的一个地方是那个箭头，我这里只是用了简单的字符串替换，而原题用了背景图片移动来实现切换箭头，但是似乎那样做会导致整个容器的左右偏移、效果不是很好。 0x2鼠标移过显示车标实现效果这题看起来...

Little_XM 2019-08-19 17:51 评论0 收藏0
jQuery获取和设置checkbox的checked属性小结

摘要：最近在项目中使用到设置，使用场景是页面上有三类单选框，一个是全选所有页数据一个是选择当前页，一个是选择一条，也算常用的场景。的属性在页面首次加载时就确定。最后，总结下获取和设置属性的方法。最近在项目中使用到jQuery设置checkbox，使用场景是页面上有三类单选框，一个是全选所有页数据(id=cb1),一个是选择当前页(id=cb2)，一个是选择一条(name=cb3)，也算常用...

scola666 2019-08-01 16:42 评论0 收藏0
解析vue表单验证rules及validator验证器的使用方法

　　很多知识都是需要提早知道，才可以规避很多错误。　　Element中Form （表单）组件提供了表单验证的功能，只需要通过 rules 属性传入约定的验证规则，并将 Form-Item 的 prop 属性设置为需校验的字段名即可。　　注意：prop对应表单域 model 字段，使用 validate方法时，该属性是必填的。　　表单验证rules　　以官网给出的例子分析来看　　将prop属性设置为...

3403771864 2022-11-23 21:44 评论0 收藏0