Comment utiliser les instructions Vue.js pour implémenter la fonction Select All

Cet article présente principalement comment utiliser la commande Vue.js pour implémenter la fonction select all. Il a une certaine valeur de référence. Maintenant, je le partage avec vous. Les amis dans le besoin peuvent s'y référer

Je. Récemment, deux projets Vue doivent tous implémenter la fonction de sélection de tout et d'inversion de la sélection. Les deux projets utilisent deux méthodes d'implémentation. Le premier projet utilise le calcul de Vue et le deuxième projet utilise des instructions pour l'implémenter. les instructions sont plus pratiques. Ensuite, nous présenterons comment utiliser les instructions pour tout sélectionner.

Parce que je viens de commencer à contacter Vue il n'y a pas longtemps, la mise en œuvre de la sélection complète fait référence à la méthode de mise en œuvre sur Zhihu :

1. Récupérez les données du serveur et définissez le attribut vérifié pour chaque élément

2. Calculez le nombre sélectionné selectCount Si le nombre sélectionné est égal au nombre de selectItems, sélectionnez tous les selectAll sélectionnés

3. Lorsque vous cliquez sur Sélectionner tout, chacun L'attribut vérifié de chaque élément est défini sur vrai, et lorsqu'il est inversé, défini sur faux,

4. Chaque fois que l'attribut de selectItems change, l'élément vérifié avec la valeur vraie est placé dans le tableau checkGroups

Voici le code d'implémentation :

 //全选
 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;
   }
  }
 }

Cette méthode n'est pas pratique à utiliser.Tout d'abord, il est difficile à reproduire. Si vous l'utilisez, vous devez écrire calculé une fois à chaque fois que vous souhaitez l'utiliser. Deuxièmement, selectAll, selectedGroups et selectItems sont tous fixes et peu flexibles.

Donc, dans ce projet, j'ai utilisé les instructions vue pour réimplémenter la fonction de sélection de tout. L'idée de la directive est en fait similaire à celle calculée. Commençons par le code :

<. 🎜>

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;
    });
   }
  },
 },
};

Appel :

<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>

Laissez-moi parler les avantages de l'utiliser de cette façon :

1. Facile à utiliser, il suffit d'écrire la commande

et v-check-all là où c'est nécessaire check-data

2. Sélectionnez tous les modèles et le nom du tableau peut être personnalisé, et n'importe quel nom peut être utilisé. Si le modèle sélectionné ne veut pas être appelé checkAll, il peut être appelé checkAllData. Si le tableau ne veut pas être appelé checkData, il peut être appelé. peut être appelé dataFromServer.

Dans la commande, spécifiez twoWay comme true, vous pouvez utiliser

pour définir la valeur de checkAll et utiliser params pour recevoir la valeur d'attribut checkData sur l'élément de commande de liaison, qui est le tableau qui doit être exploité. this.set(value)

Utilisez

pour obtenir le contexte d'utilisation de l'instruction et appelez le contexte this.vm pour surveiller les modifications dans checkData Si tous les checkData sont sélectionnés, définissez checkAll sur true, sinon définissez checkAll sur false. $watch

Lorsque la valeur de l'instruction (checkAll) change, si elle est vraie, définissez les attributs vérifiés de checkData sur true, sinon elle est fausse. À ce stade, une commande de sélection totale est terminée.

En effectuant cette commande select all, je voulais à l'origine utiliser paramWatchers pour surveiller les modifications dans checkData, mais j'ai découvert que lorsque checkData change, le rappel de paramWatchers ne sera pas déclenché. Après avoir regardé le code source, j'ai regardé. a constaté que paramWatchers en fait

est également appelé, mais la détection de profondeur n'est pas prise en charge : $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);
};

Ce qui précède représente l'intégralité du contenu de cet article. J'espère que cela sera utile à l'étude de tout le monde. Pour plus de contenu connexe, veuillez faire attention au site Web PHP chinois !

Recommandations associées :

Analyse sur l'utilisation du routage vue

Analyse sur la façon dont vue introduit les variables globales sass

Utilisez vue-router pour effectuer des fonctions de navigation simples

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!