Parce que je viens de commencer à m'impliquer dans Vue, la mise en œuvre de toutes les références sélectionnées à la méthode d'implémentation sur Zhihu:
1. Obtenez des données du serveur et définissez l'attribut vérifié pour chaque élément
2. Calculez la quantité sélectionnée SelectCount. Si la quantité sélectionnée est égale au nombre de SelectItems, sélectionnez All Selectall
3. Lors de la sélection de tous, définissez l'attribut vérifié de chaque élément sur true et lors de la sélection inversement, définissez-le sur False.
4. Chaque fois que la propriété de SelectItems modifie, l'élément vérifié est placé dans les groupes vérifiés du tableau.
Ce qui suit est le code d'implémentation:
// Sélectionnez toutes les données: fonction () {return {selectItems: [], // Données obtenues à partir du serveur}}, calculées: {// Sélectionnez tous les modèles liés à la case selectall: {get: function () {return this.selectCount == this.selectems.length; }, set: function (value) {this.selectItems.ForEach (fonction (item) {item.checked = value;}); valeur de retour; }}, // La quantité sélectionnée selectCount: {get: function () {var i = 0; this.selectItems.ForEach (fonction (item) {if (item.checked) {i ++;}}); retour i; }}, // Le tableau sélectionné CheckEdGroups: {get: function () {var checkedGroups = []; this.selectItems.ForEach (fonction (item) {if (item.checked) {checkedGroup.push (item);}}); retourner les groupes vérifiés; }}}Cette méthode n'est pas très pratique à utiliser. Tout d'abord, il est difficile de réutiliser. Chaque fois que vous souhaitez l'utiliser, vous devez écrire calculé. Deuxièmement, SelectAll, CheckedGroups et SelectItems sont tous fixes et pas très flexibles.
Donc, dans ce projet, j'ai utilisé l'instruction VUE pour réimplémenter la fonction de sélection de tout. L'idée de directive est en fait similaire à celle calculée. Tout d'abord, ajoutez le code:
Exporter default {'Check-all': {Twoway: true, params: ['checkData'], bind () {/ ** - Si l'attribut coché de toutes les listes est vrai, sélectionnez la case à cocher, sinon la boîte à cocher n'est pas sélectionnée * / this.vm. $ watch (this.params.checkdata, (itember) => {if (checkdata {this.set (true);} else {this.set (false);}}, {Deep: true}); }, // Update (CheckAll) Lorsque CheckAll modifie {/ ** - Si la case à cocher est sélectionnée, toutes les propriétés cochées de la liste sont converties en vrai, sinon ils sont convertis en faux * / if (CheckAll) {this.vm [this.params.CheckData] .ForEach ((item) => {item.Cheked = 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 dans CheckData"> <entrée type = "Checkbox" V-model = "item.checked"> {{item.text}} </li> </ul>Parlons des avantages de l'utilisation:
1. Facile à utiliser. Écrivez simplement v-check-all et check-data si nécessaire.
2. Le modèle et les noms de tableau sélectionnés peuvent être personnalisés et tout nom peut être utilisé. Si vous ne souhaitez pas appeler CheckAll et CheckAllData, vous pouvez également appeler des tableaux et vérifier DataFromServer.
Dans l'instruction, spécifiez Twoway sur true, vous pouvez utiliser this.set(value) pour définir la valeur de CheckAll et utiliser les paramètres pour recevoir la valeur de propriété CheckData sur l'élément d'instruction de liaison, qui est le tableau à fonctionner.
Utilisez this.vm pour obtenir le contexte de la directive d'utilisation, appelez $watch du contexte pour écouter les modifications de CheckData. Si tous les chèques sont sélectionnés, définissez CheckAll sur true, sinon définissez CheckAll sur false.
Lorsque la valeur d'instruction (CheckAll) modifie, si vrai, définissez l'attribut vérifié de CheckData à true, sinon il est faux. À ce stade, une commande sélectionnée est terminée.
Lors de cette sélection toutes les instructions, je voulais à l'origine utiliser les paramwatchers pour écouter les modifications de contrôle, mais j'ai constaté que lorsque CheckData change, le rappel de Paramwatchers ne sera pas déclenché. Plus tard, j'ai examiné le code source et j'ai constaté que Paramwatchers a réellement appelé $watch , mais il ne prend pas en charge la détection profonde:
Directive.prototype._setupparamwatcher = fonction (key, expression) {var self = this; var appelé = false; VRAT UNSABALL = (this._scope || this.vm). $ watch (expression, function (val, oldval) {self.params [key] = val; // Puisque nous sommes en mode immédiat, // appelle unique Val, OldVal);}} else {appelé = true;}}, {immédiat: true, utilisateur: false}); (this._paramunwatchfns || (this._paramunwatchfns = []).Résumer
Ce qui précède est l'intégralité du contenu de cet article. S'il y a quelque chose qui ne va pas, donnez-moi quelques conseils. J'espère que le contenu de cet article sera utile à tout le monde.