How to use el-checkbox to select all (code)

The content of this article is about using el-checkbox to achieve full selection (code). It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

Recently received a request in the company, add batches, select all and delete books in favorites
Implementation idea: click on select all to change the checked of the item, change the checked of the item, and make it more convenient All items are checked to change the selectAll

1) The basic function of this component has been implemented. The checkbox uses vant-ui. Since the official website does not have a demo with such a function, I implemented it according to the above ideas, but it is a headache. It only has a change event, which means that when the checked item is changed by selecting all, the change of the item will be triggered. At the same time, the change of the item will trigger the event in the change of all selection, thus creating an infinite loop.

2) Use native click instead of change event

3) Use el-checkbox. Fortunately, the project also uses element-ui. I checked the implementation plan, although I have some doubts about its val
Note: The data bound to el-checked must be in the data from the beginning and cannot be added later, which may cause clicks to fail sometimes, hahaha~~

<el-checkbox v-model="selectAll" @change="selectAllFunc"></el-checkbox>
<el-checkbox  v-model="item.checked" @change="selectProduct"></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;
  })
}

The above is the detailed content of How to use el-checkbox to select all (code). For more information, please follow other related articles on the PHP Chinese website!