Comment utiliser el-checkbox pour tout sélectionner (code)

Le contenu de cet article concerne l'utilisation d'el-checkbox pour obtenir une sélection complète (code). Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer.

Récemment reçu une demande dans l'entreprise pour ajouter des lots de livres préférés, tous sélectionner et les supprimer
Idée de mise en œuvre : cliquez sur tout sélectionner pour modifier la coche de l'élément, modifier la cochée de l'élément et le rendre plus pratique. Tous les éléments sont cochés pour modifier le selectAll

1) La fonction de base de ce composant a été implémentée. La case à cocher utilise vant-ui En raison du fait que le site officiel le fait. Je n'ai pas de démo avec une telle fonction, je l'ai implémentée selon les idées ci-dessus, mais cela m'a donné mal à la tête. Il n'a qu'un événement de changement, ce qui signifie que lorsque l'élément coché est modifié en sélectionnant tout, l'élément est modifié. sera déclenché en même temps, le changement de l'élément déclenchera l'événement dans le changement de toute la sélection, créant ainsi une boucle infinie

2) Utilisez le clic natif pour remplacer l'événement de changement

3) Utilisez el-checkbox. Heureusement, le projet utilise également element-ui. J'ai vérifié le plan d'implémentation, même si j'ai quelques doutes sur sa valeur
Remarque : les données liées à el-checked doivent être dans les données. depuis le début et ne peut pas être ajouté plus tard, ce qui peut parfois provoquer des échecs de clic, 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;
  })
}

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!