So verwenden Sie die Anweisungen von Vue.js, um die Funktion „Alle auswählen“ zu implementieren

In diesem Artikel wird hauptsächlich die Verwendung des Vue.js-Befehls zum Implementieren der Select-All-Funktion vorgestellt. Er hat einen bestimmten Referenzwert. Jetzt können Freunde in Not darauf verweisen Ich habe kürzlich zwei Vue-Projekte erstellt, die alle die Funktion „Alle auswählen“ und „Umkehren der Auswahl“ implementieren müssen. Das erste Projekt verwendet die berechneten Methoden von Vue, und das zweite Projekt verwendet Anweisungen, um es zu implementieren Die Anweisungen sind bequemer. Als Nächstes stellen wir vor, wie Sie mithilfe von Anweisungen alles auswählen können.

Da ich erst vor kurzem angefangen habe, Vue zu kontaktieren, bezieht sich die Implementierung der vollständigen Auswahl auf die Implementierungsmethode auf Zhihu:

1. Holen Sie sich die Daten vom Server und legen Sie fest geprüftes Attribut für jedes Element

2. Berechnen Sie die ausgewählte Anzahl selectCount. Wenn die ausgewählte Anzahl gleich der Anzahl der selectItems ist, wählen Sie alle selectAll selected aus

3. Wann Sie klicken auf „Alle auswählen“, jedes. Das überprüfte Attribut jedes Elements wird auf „true“ gesetzt und bei Umkehrung auf „false“ gesetzt.

4. Jedes Mal, wenn sich das Attribut von „selectItems“ ändert, erhält das überprüfte Element den Wert „true“. wird in das Array „checkedGroups“ eingefügt

Das Folgende ist der Implementierungscode:

 //全选
 data: function() {
  return {
   selectItems: [], // 从服务器拿到的数据
  }
 },
 computed: {
  // 全选checkbox绑定的model
  selectAll: {
   get: function() {
    return this.selectCount == this.selectItems.length;
   },
   set: function(value) {
    this.selectItems.forEach(function(item) {
     item.checked = value;
    });
    return value;
   }
  },
  //选中的数量
  selectCount: {
   get: function() {
    var i = 0;
    this.selectItems.forEach(function(item) {
     if (item.checked) {
      i++;
     }
    });
    return i;
   }
  },
  //选中的数组
  checkedGroups: {
   get: function() {
    var checkedGroups = [];
    this.selectItems.forEach(function(item) {
     if (item.checked) {
      checkedGroups.push(item);
     }
    });
    return checkedGroups;
   }
  }
 }

Diese Methode ist nicht praktisch Erstens ist es schwierig, es jedes Mal wiederzuverwenden, wenn Sie es verwenden möchten. Zweitens sind „selectAll“, „checkedGroups“ und „selectItems“ alle fest und nicht sehr flexibel.

In diesem Projekt habe ich Vue-Anweisungen verwendet, um die Funktion zum Auswählen aller Elemente erneut zu implementieren. Die Idee der Direktive ähnelt tatsächlich der des berechneten Codes:

export default {
 'check-all': {
  twoWay: true,
  params: ['checkData'],
  bind() {
   /**
    - 如果所有的列表的checked属性都为true,则选中全选框,否则不选中全选框
    */
   this.vm.$watch(this.params.checkData, (checkData) => {
    if (checkData.every((item) => item.checked)) {
     this.set(true);
    } else {
     this.set(false);
    }
   }, { deep: true });
  },
  // checkAll发生更改时
  update(checkAll) {
   /**
    - 如果全选框被选中,则将列表的所有checked属性转为true,否则转为false
    */
   if (checkAll) {
    this.vm[this.params.checkData].forEach((item) => {
     item.checked = true;
    });
   } else {
    this.vm[this.params.checkData].forEach((item) => {
     item.checked = false;
    });
   }
  },
 },
};

Anruf:

<input type="checkbox" v-model="checkAll" v-check-all="checkAll" check-data="checkData">
  <ul>
   <li v-for="item in checkData">
    <input type="checkbox" v-model="item.checked">
    {{item.text}}
   </li>
  </ul>

Lass uns zunächst über die Vorteile der Verwendung sprechen es so:

1 Einfach zu verwenden, schreiben Sie einfach den

Befehl und

wo nötig v-check-allcheck-data
2 Der Name des Arrays kann angepasst werden. Sie können einen beliebigen Namen verwenden. Wenn Sie das ausgewählte Modell nicht checkAll nennen möchten, können Sie es checkAllData nennen. Wenn Sie nicht möchten, dass das Array checkData heißt, können Sie es dataFromServer nennen .

Geben Sie im Befehl twoWay als true an. Sie können

verwenden, um den Wert von checkAll festzulegen, und params verwenden, um den Attributwert checkData für das Bindungsbefehlselement zu empfangen, bei dem es sich um das Array handelt, das benötigt wird operiert werden.

this.set(value)Verwenden Sie

, um den Kontext der Verwendung der Anweisung abzurufen, und rufen Sie den Kontext

auf, um Änderungen in checkData zu überwachen. Wenn alle checkData ausgewählt sind, setzen Sie checkAll auf true, andernfalls setzen Sie checkAll auf false. this.vm$watchWenn sich der Anweisungswert (checkAll) ändert und er wahr ist, setzen Sie die überprüften Attribute von checkData auf wahr, andernfalls ist er falsch. An diesem Punkt ist ein „Alle auswählen“-Befehl abgeschlossen.

Als ich diesen Befehl „Alle auswählen“ ausführte, wollte ich ursprünglich paramWatchers verwenden, um Änderungen in checkData zu überwachen, aber ich habe festgestellt, dass der Rückruf von paramWatchers nicht ausgelöst wird, nachdem ich mir den Quellcode angesehen habe Ich habe festgestellt, dass paramWatchers tatsächlich auch

aufgerufen wird, die Tiefenerkennung jedoch nicht unterstützt wird:

$watch

Directive.prototype._setupParamWatcher = function (key, expression) {
 var self = this;
 var called = false;
 var unwatch = (this._scope || this.vm).$watch(expression, function (val, oldVal) {
 self.params[key] = val;
 // since we are in immediate mode,
 // only call the param change callbacks if this is not the first update.
 if (called) {
  var cb = self.paramWatchers && self.paramWatchers[key];
  if (cb) {
  cb.call(self, val, oldVal);
  }
 } else {
  called = true;
 }
 }, {
 immediate: true,
 user: false
 });(this._paramUnwatchFns || (this._paramUnwatchFns = [])).push(unwatch);
};

Das Obige ist der gesamte Inhalt dieses Artikels, ich hoffe es wird für das Lernen aller hilfreich sein. Weitere Informationen finden Sie auf der chinesischen PHP-Website.

Verwandte Empfehlungen:

Analyse zur Verwendung von Vue-Routing

Analyse dazu, wie Vue globale Sass-Variablen einführt

Verwenden Sie den Vue-Router, um einfache Navigationsfunktionen auszuführen

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