angular-zorro nzShowCheckbox需要点击两次才能选中、 Indeterminate的含义

最新推荐文章于 2023-09-15 10:11:55 发布

原创最新推荐文章于 2023-09-15 10:11:55 发布 · 813 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

js 专栏收录该内容

16 篇文章

订阅专栏

本文探讨了nzShowCheckbox组件需要点击两次才能选中的问题，并解释了Indeterminate状态的作用及其判断逻辑。通过示例代码说明如何实现全选、单选及Indeterminate状态的更新。

一、nzShowCheckbox需要点击两次才能选中

原因：

data.checked的真假值切换已经自动完成了，不应该再次切换

二、Indeterminate的含义

当indeterminate的值为真时，强制将选中状态变为 - (只影响界面显示，不影响数据）

indeterminate何时为真？

除以下两个状态之外

（1）所有的单选框选中

（2）所有的单选框未选中

即：部分选中

附：

itemList是列表数据

  checkAll() {
    if(this.allChecked_table){
      this.itemList.forEach(i=>i.checked=true)
    }else{
      this.itemList.forEach(i=>i.checked=false)
    }
    this.ensure_state_indeterminate_table()
  }

  checkOne() {
    this.ensure_state_indeterminate_table()
    this.ensure_state_allChecked_table()
  }

  ensure_state_indeterminate_table(){
    let is_all_check = this.itemList.every(i=>i.checked==true)
    let is_all_not_check = this.itemList.every(i=> (i.checked==false || i.checked==undefined || i.checked==null))
    if(is_all_check || is_all_not_check){
      this.indeterminate_table = false
    }else{
      this.indeterminate_table = true
    }
  }

  ensure_state_allChecked_table(){
    let is_all_not_check = this.itemList.every(i=> (i.checked==false || i.checked==undefined || i.checked==null))
    if(is_all_not_check) {
      this.allChecked_table = false;
    }else{
      this.allChecked_table = true;
    }
  }