ホームページ > 記事 > ウェブフロントエンド > Vue.js 命令を使用してすべて選択機能を実装する方法

Vue.js 命令を使用してすべて選択機能を実装する方法

不言オリジナル: 2018-06-29 11:52:312464ブラウズ

この記事では主に、Vue.js コマンドを使用して select-all 関数を実装する方法を紹介します。これを必要な友人に共有します。

Vue プロジェクトでは、どちらも全選択と選択の反転の機能を実現するために、2 つの実装方法を使用する必要があります。最初のプロジェクトは vue の計算を使用し、2 番目のプロジェクトは命令を使用して実装したことがわかりました。指示の方が便利です。次に、全選択命令の使い方を紹介します。

vueを使い始めたばかりなので、完全選択の実装はZhihuでの実装方法を参考にします:

1. サーバーからデータを取得し、各項目にchecked属性を設定します

2. 選択された値を計算します数値 selectCount 、選択された項目の数が selectItem の数と等しい場合、すべて選択します

selectItems の属性が変更されると、true にチェックされた項目が配列 checkGroups に入れられます。以下は実装コードです。 :

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

このメソッドは使いにくいです。まず、これを使用する場合、毎回計算を行う必要があります。 selectedGroups と selectItems はすべて固定されており、あまり柔軟性がありません。

そこで、このプロジェクトでは、vue 命令を使用してすべてを選択する関数を再実装しました。最初に、ディレクティブの考え方は computed と似ています。

export default {
 &#39;check-all&#39;: {
  twoWay: true,
  params: [&#39;checkData&#39;],
  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;
    });
   }
  },
 },
};

まず、この方法で使用する利点について説明します。

1. 必要に応じて、v-check-all を記述すると便利です。コマンドと check-data code> を実行します<strong></strong>

2. 完全に選択されたモデルを checkAll という名前にしたくない場合は、任意の名前を使用できます。配列を checkData という名前にしたくない場合は、dataFromServer という名前にすることができます。

コマンドでは、twoWay を true として指定し、this.set(value) を使用して checkAll の値を設定し、params を使用してバインディングコマンド要素の属性値 checkData を受け取ることができます。演算配列が必要です。

this.vm を使用して命令を使用するコンテキストを取得し、コンテキストの $watch を呼び出して checkData の変更を監視します。すべての checkData が選択されている場合は、checkAll をに設定します。 true、それ以外の場合は、checkAll が false に設定されます。

命令値(checkAll)が変更された場合、trueであればcheckDataのchecked属性をtrueに設定し、それ以外の場合はfalseとなります。この時点で、全選択コマンドが完了します。
この全選択コマンドを実行するとき、当初は paramWatchers を使用して checkData の変更を監視したかったのですが、checkData が変更されたときに paramWatchers のコールバックがトリガーされないことがわかりました。実際には$watch と呼ばれますが、詳細な検出はサポートされていません:

v-check-all指令和check-data就可以

2、全选的model和数组名可以定制，用什么名字都可以，全选的model不想叫checkAll叫checkAllData也可以，数组不想叫checkData叫dataFromServer也可以。

在指令中，指定twoWay为true,就可以用this.set(value)来设置checkAll的值，用params接收绑定指令元素上的属性值checkData,也就是需要操作的数组。

用this.vm获取使用指令的上下文，调用上下文的$watch来监听checkData的变化，如果checkData全部选中，则设置checkAll为true，否则设置checkAll为false。

当指令值（checkAll）发生变化，如果为true，则将checkData的checked属性都设为true，否则为false。至此，一个全选的指令就完成了。

在做这个全选指令的时候，本来想用paramWatchers来监听checkData的变化的，但是发觉checkData变动时，并不会触发paramWatchers的回调，后来看了一下源码才发现，paramWatchers其实也是调用了$watch

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

上記はこの記事の全内容であり、他の関連コンテンツについても役立つことを願っています。、PHP 中国語 Web サイトに注意してください。

Vue.js 命令を使用してすべて選択機能を実装する方法

関連記事