刘帅的个人博客
刘帅的个人博客
About Me:
我是刘帅,(曾用网名:偻儸小卒、会PS的小码农、爱折腾的小码农、Edison Liu),来自酉州桃花源,重庆市酉阳县可大乡。是一枚真正会修电脑的程序员,也是一个在编程的路上越走越远的设计师,曾编写过一个叫“锟斤拷”的项目,也曾设计过一张叫“五彩斑斓的黑”的设计稿。我的个人博客采用ginblog_nuxt编写使用ginblog改写有兴趣或者申请免费友情链接的朋友可以加我QQ我们一起交流学习。
747357766
EdisonLiu_
747357766@qq.com
Vue checkbox 的isIndeterminate 踩到巨坑
2021-06-21 20:47
0
57

前言

最近使用vue开发时需要用到check全选然后选中这个类目下的其他checkbox功能。网上能找到的方法就是使用indeterminate。但是当我使用的时候始终不对,要不是点了没反应就是显示的不是√和空而是 - 和空emmm,最后解决方案。

功能介绍

对于indeterminate和v-model绑定的hdIsIndeterminate和hdCheckAll的值
如果true true 或者 true false样式为-
如果false true样式为√
如果false false样式为不勾

踩坑

使用的时候,目标非常明确,我这里当然是要采用 false true模式和 false false模式。但是当我用的时候出问题了。直接点不动,或者选中一次后第二次就点不动了。这~~~。

解决方案

当然在我不断的轮番折腾下,最终找到解决方案。只要重复设置一下isIndeterminate然后再将isIndeterminate设置为false就可以了


handleCheckAllChange(e) {
 this.isIndeterminate = e 
 this.isIndeterminate = !e 
//在这里写子checkbox 的checked=true

 this.isIndeterminate = false
}

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7