So verwenden Sie das el-Kontrollkästchen, um alle auszuwählen (Code)

Der Inhalt dieses Artikels befasst sich mit der Verwendung des el-Kontrollkästchens, um eine vollständige Auswahl (Code) zu erreichen. Ich hoffe, dass er für Freunde in Not hilfreich ist.

Kürzlich erhielt ich eine Anfrage im Unternehmen, Stapel von Lieblingsbüchern hinzuzufügen, alle auszuwählen und zu löschen
Implementierungsidee: Klicken Sie auf „Alle auswählen“, um das Häkchen des Artikels zu ändern, das Häkchen zu ändern das Element, und machen Sie es bequemer. Alle Elemente werden aktiviert, um die Auswahl zu ändern.

1) Die Grundfunktion dieser Komponente wurde implementiert. Aufgrund der Tatsache, dass die offizielle Website dies tut Ich habe keine Demo mit einer solchen Funktion, ich habe sie gemäß den oben genannten Ideen implementiert, aber es hat mir Kopfschmerzen bereitet. Es gibt nur ein Änderungsereignis, was bedeutet, dass die Änderung des Elements erfolgt, wenn das markierte Element geändert wird Gleichzeitig wird durch die Änderung des Elements das Ereignis in der Änderung aller Auswahlen ausgelöst, wodurch eine Endlosschleife entsteht

2) Verwenden Sie einen nativen Klick, um das Änderungsereignis zu ersetzen

3) Glücklicherweise verwendet das Projekt auch element-ui. Ich habe den Implementierungsplan überprüft, obwohl ich einige Zweifel an seiner Gültigkeit habe.
Hinweis: Die an el-checked gebundenen Daten müssen in den Daten enthalten sein von Anfang an und kann später nicht hinzugefügt werden, was dazu führen kann, dass Klicks manchmal fehlschlagen, 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;
  })
}

Das obige ist der detaillierte Inhalt vonSo verwenden Sie das el-Kontrollkästchen, um alle auszuwählen (Code). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!