Da ich mich gerade mit VUE engagiert habe, implementiert die Implementierung aller ausgewählten Verweise auf die Implementierungsmethode auf Zhihu:
1. Nehmen Sie Daten vom Server ab und setzen Sie das überprüfte Attribut für jedes Element fest
2. Berechnen Sie die ausgewählte Menge SelectCount. Wenn die ausgewählte Menge gleich der Anzahl der SelectItems ist, wählen Sie alle SelectAll aus
3. Setzen Sie bei der Auswahl des gesamten überprüften Attributs jedes Elements auf True und setzen Sie es bei umgekehrter Auswahl auf false.
4. Jedes Mal, wenn sich die Eigenschaft von SelectItem ändert, wird das geprüfte Element in die Array -CheckedGroups platziert.
Das Folgende ist der Implementierungscode:
// Alle Daten auswählen: function () {return {selectItems: [], // Daten, die aus dem Server}} erhalten wurden, berechnet: {// Wählen Sie das gesamte Modell aus, das an das Kontrollkästchen selectAll: {get: function () {return this.SelectCount == this.SelectEMs.Length; }, set: function (value) {this.selectItems.foreach (Funktion (item) {item.Conted = value;}); Rückgabewert; }}, // Die ausgewählte Menge selectCount: {get: function () {var i = 0; this.SelectItems.foreach (Funktion (item) {if (item.Conted) {i ++;}}); kehre I zurück; }}, // Das ausgewählte Array CheckedGroups: {get: function () {var checkedGroups = []; this.selectItems.foreach (Funktion (item) {if (item.Conted) {checkedGroups.push (item);}}); Rückgabe -CheckedGroups; }}}Diese Methode ist nicht sehr bequem zu verwenden. Zunächst ist es schwierig, wiederzuverwenden. Jedes Mal, wenn Sie es verwenden möchten, müssen Sie Computer schreiben. Zweitens sind Selectall, CheckedGroups und SelectItems fest und nicht sehr flexibel.
In diesem Projekt habe ich die VUE-Anweisung verwendet, um die Funktion der Auswahl aller zu implementieren. Die Idee der Richtlinie ähnelt der von Computer. Fügen Sie zunächst den Code hinzu:
Export -Standard -Standard {'check -All': {twoway: true, params: ['checkData'], bind () { / ** - Wenn das überprüfte Attribut aller Listen wahr ist, wählen Sie das Kontrollkästchen prüfen, andernfalls ist das Kontrollkästchen nicht ausgewählt* / this.vm. item.Conted) {this.set (true); }, // update (checkall) Wenn ändert ändert { / ** - Wenn das gesamte Kontrollkästchen ausgewählt ist, werden alle überprüften Eigenschaften der Liste in true konvertiert. Andernfalls werden sie in false* / if (checkAll) {this.vm [this.Params.Checkdata] konvertiert. } else {this.vm [this.params.CheckData] .foreach ((item) => {item.Checked = false;}); }},},};Angerufen:
<Eingabe type = "checkbox" v-model = "checkall" v-Check-All = "checkAll" check-data = "checkData"> <ul> <li v-for = "item in checkData"> <Eingabe type = "CheckBox" v-Model = "item.checked"> {{{text}} </ul> </ul> </ul> </ul> </ul> </ul> </ul>Sprechen wir über die Vorteile, dies zu verwenden:
1. Einfach zu bedienen. Schreiben Sie einfach v-check-all und check-data wo dies erforderlich ist.
2. Die ausgewählten Modell- und Array -Namen können angepasst werden und jeder Name kann verwendet werden. Wenn Sie Checkall und CheckAllData nicht anrufen möchten, können Sie auch Arrays anrufen und dataFromServer checkData anrufen.
Geben Sie in der Anweisung this.set(value) true an.
Verwenden Sie this.vm , um den Kontext der Nutzungsrichtlinie zu erhalten, rufen Sie $watch des Kontextes an, um die Änderungen in CheckData zu hören. Wenn alle CheckData ausgewählt sind, setzen Sie Checkall auf true ein, ansonsten stellen Sie das Scheck auf false fest.
Wenn sich der Anweisungswert (Checkall) ändert, setzen Sie das Checkdata -Attribut von CheckData auf True, da es ansonsten falsch ist. Zu diesem Zeitpunkt ist ein ausgewählter Befehl abgeschlossen.
Bei dieser Auswahl alle Anweisungen wollte ich ursprünglich ParamWatchers zum Hören von Änderungen von CheckData verwenden, aber ich stellte fest, dass der Rückruf von Paramwatchers bei ändert, dass die Rückruf von Paramwatchers nicht ausgelöst wird. Später schaute ich mir den Quellcode an und stellte fest, dass Paramwatchers $watch tatsächlich genannt wurde, aber er unterstützt keine tiefe Erkennung:
Directive.Prototype._SetupparamWatcher = Funktion (Schlüssel, Ausdruck) {var self = this; var genannt = false; var unabbatch = (this._scope || this.vm). Val, OldVal);Zusammenfassen
Das obige ist der gesamte Inhalt dieses Artikels. Wenn etwas nicht stimmt, geben Sie mir bitte einen Rat. Ich hoffe, der Inhalt dieses Artikels wird für alle hilfreich sein.