So verwenden Sie den Befehl „Alle auswählen“ von Vue.js, um den Vorgang „Alle auswählen“ mehrerer Auswahlfelder zu implementieren

In der Vue.js-Entwicklung ist es häufig erforderlich, den Alles-Auswahl-Vorgang von Mehrfachauswahlfeldern zu handhaben. Mithilfe der V-Model-Direktive von Vue.js können Sie die Einzelauswahl- und Mehrfachauswahlfunktionen einer Mehrfachauswahlbox problemlos implementieren. Um jedoch die Funktion „Alles auswählen“ des Mehrfachauswahlfelds zu implementieren, müssen Sie die benutzerdefinierten Anweisungen von Vue.js verwenden. In diesem Artikel wird erläutert, wie Sie mit dem Befehl „Alle auswählen“ von Vue.js den Vorgang „Alle auswählen“ von Mehrfachauswahlfeldern implementieren.

1. Erstellen Sie eine Select-All-Direktive

Definieren Sie zunächst eine Select-All-Direktive in der Vue.js-Instanz mit dem Namen v-check-all:

Vue.directive('check-all', {
  bind: function(el, binding) {
    el.checked = binding.value;
    el.indeterminate = true; // 中间状态
  },
  update: function(el, binding) {
    el.checked = binding.value;
  }
});

Diese Direktive ist an das Multi-Select-Box-Element gebunden. Es verfügt über zwei Lebenszyklusfunktionen, nämlich binden und aktualisieren.

In der Bindungslebenszyklusfunktion setzen wir den geprüften Status des Mehrfachauswahlfeldelements auf den Wert der Anweisungsbindung und setzen das unbestimmte Attribut auf wahr. Das unbestimmte Attribut gibt an, dass sich das Mehrfachauswahlfeldelement in einem Zwischenzustand befindet, d. h. es ist weder ein ausgewählter noch ein nicht ausgewählter Zustand. Dies dient dazu, den teilweise ausgewählten Zustand in der Funktion „Alles auswählen“ zu erreichen.

In der Update-Lebenszyklusfunktion hören wir auf den an die Anweisung gebundenen Wert. Sobald sich der Wert der Anweisung ändert, setzen wir den aktivierten Status des Mehrfachauswahlfeldelements auf diesen Wert. Auf diese Weise wird die Select-All-Funktion implementiert.

2. Verwenden Sie den Befehl „Alle auswählen“

Als nächstes verwenden Sie den Befehl „v-check-all“ in der Mehrfachauswahlfeldliste, für die die Funktion „Alle auswählen“ erforderlich ist, um den Vorgang „Alle auswählen“ auszuführen. Wie im folgenden Code gezeigt:

<div id="app">
  <input type="checkbox" v-model="allChecked" v-check-all="allChecked">
  <span>全选/取消全选</span>
  <ul>
    <li v-for="(item, index) in list" :key="index">
      <input type="checkbox" v-model="item.checked">
      <span>{{ item.name }}</span>
    </li>
  </ul>
</div>

Im obigen Beispiel verwenden wir die V-Model-Direktive, um den aktivierten Status des All-Selected-Felds an die allChecked-Eigenschaft der Vue.js-Instanz zu binden. Wenn das All-Select-Feld ausgewählt ist, ist der Wert des allChecked-Attributs wahr, andernfalls ist er falsch.

Dann verwenden wir im ul-Tag die v-for-Direktive, um jedes Element in der Liste zu durchlaufen. Jedes Listenelementelement enthält ein Kontrollkästchen und einen Namen.

Verwenden Sie die V-Model-Direktive für das Mehrfachauswahlfeld, um den geprüften Status jedes Elements an das geprüfte Attribut des Elements zu binden. Wenn das Element ausgewählt ist, ist der Wert des überprüften Attributs wahr, andernfalls ist er falsch.

Verwenden Sie abschließend den Befehl v-check-all für das All-Select-Feld und setzen Sie den an den Befehl gebundenen Wert auf das Attribut allChecked, um die All-Select-Funktion zu erreichen.

3. Implementieren des teilweise ausgewählten Zustands

Im obigen Beispiel haben wir das unbestimmte Attribut verwendet, um den teilweise ausgewählten Zustand zu implementieren. Wenn alle Mehrfachauswahlfelder in der Liste ausgewählt sind, wird das Gesamtauswahlfeld ausgewählt. Wenn ein oder mehrere Mehrfachauswahlfelder in der Liste nicht ausgewählt sind, wird das Gesamtauswahlfeld deaktiviert. Wenn einige der Mehrfachauswahlfelder in der Liste ausgewählt sind, befindet sich das Gesamtauswahlfeld im mittleren Zustand.

Um den teilweise ausgewählten Zustand zu erreichen, müssen wir außerdem eine berechnete Eigenschaft in der Vue.js-Instanz definieren, um zu bestimmen, ob die Anzahl der Mehrfachauswahlfelder in der Liste der ausgewählten Anzahl entspricht. Wenn sie gleich sind, bedeutet dies, dass alle Mehrfachauswahlfelder ausgewählt sind. Wenn die Anzahl der Auswahlfelder zu diesem Zeitpunkt 0 ist, bedeutet dies, dass alle Mehrfachauswahlfelder deaktiviert sind. und die All-Select-Boxen sollten zu diesem Zeitpunkt deaktiviert sein; andernfalls befindet sich die All-Select-Box im mittleren Zustand.

computed: {
  allChecked: {
    get: function() {
      return this.list.every(function(item) {
        return item.checked
      });
    },
    set: function(value) {
      this.list.forEach(function(item) {
        item.checked = value;
      });
    }
  }
}

Im obigen Beispiel verwenden wir die berechnete Eigenschaft von Vue.js, um die gesamte Auswahl zu implementieren und eine berechnete allChecked-Eigenschaft zu definieren. In der get-Methode durchlaufen wir jedes Element in der Liste. Sobald das überprüfte Attribut eines Elements „false“ ist, geben wir „false“ zurück, was darauf hinweist, dass nicht alle Mehrfachauswahlfelder ausgewählt sind. Andernfalls wird „true“ zurückgegeben, was bedeutet, dass alle Kontrollkästchen aktiviert sind. In der Set-Methode setzen wir das überprüfte Attribut jedes Elements in der Liste auf den angegebenen Wert, um die Funktion zum Auswählen aller und Abwählen aller Elemente zu erreichen.

Im Allgemeinen ist es eine sehr praktische Möglichkeit, benutzerdefinierte Anweisungen zu verwenden, um alle Mehrfachauswahlfelder auszuwählen. Ich glaube, dass die Leser anhand der obigen Beispiele die Verwendung von Vue.js „Alle auswählen“-Anweisungen beherrschen.

Das obige ist der detaillierte Inhalt vonSo verwenden Sie den Befehl „Alle auswählen“ von Vue.js, um den Vorgang „Alle auswählen“ mehrerer Auswahlfelder zu implementieren. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!