Vue.jsの全選択コマンドを使用して複数の選択ボックスの全選択操作を実装する方法

Vue.js 開発では、多くの場合、複数選択ボックスの全選択操作を処理する必要があります。 Vue.js の v-model ディレクティブを使用すると、複数選択ボックスの単一選択および複数選択機能を簡単に実装できます。ただし、複数選択ボックスの全選択機能を実装するには、Vue.js のカスタム命令を使用する必要があります。この記事では、Vue.jsの全選択コマンドを使用して、複数選択ボックスの全選択操作を実装する方法を紹介します。

1. 全選択ディレクティブの作成

まず、Vue.js インスタンスで 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;
  }
});

という名前の全選択ディレクティブを定義します。

このコマンドは複数選択ボックス要素にバインドされています。これには、バインドと更新という 2 つのライフサイクル関数があります。

バインド ライフ サイクル関数では、複数選択ボックス要素のチェック ステータスを命令バインディングの値に設定し、indeterminate 属性を true に設定します。 indeterminate 属性は、マルチセレクト ボックス要素が中間状態、つまり選択状態でも非選択状態でもないことを示します。これは、全選択機能において部分的に選択された状態を実現するためである。

更新ライフサイクル関数では、命令にバインドされた値をリッスンし、命令の値が変更されると、複数選択ボックス要素のチェック状態をその値に設定します。このようにして、全選択機能が実装されます。

2. すべて選択コマンドを使用する

次に、複数選択ボックス リストで v-check-all コマンドを使用します。このコマンドには、選択を実行するためにすべて選択機能が必要です。すべての操作。次のコードに示すように:

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

上の例では、v-model ディレクティブを使用して、全選択ボックスのチェック状態を Vue.js インスタンスの allChecked 属性にバインドします。全選択ボックスが選択されている場合、allChecked 属性の値は true になり、それ以外の場合は false になります。

次に、ul タグ内で v-for ディレクティブを使用して、リスト内の各要素を反復処理します。各リスト項目要素には、チェックボックスと名前が含まれます。

複数選択ボックスで v-model ディレクティブを使用して、各要素のチェック済みステータスを要素のチェック済み属性にバインドします。要素が選択されている場合、checked 属性の値は true になり、それ以外の場合は false になります。

最後に、全選択ボックスで v-check-all 命令を使用し、命令にバインドされた値を allChecked 属性に設定して、全選択機能を実現します。

3. 部分選択状態の実現

上記の例では、indeterminate 属性を使用して部分選択状態を実現しました。リスト内のすべての複数選択ボックスが選択されると、その全選択ボックスが選択され、リスト内の 1 つ以上の複数選択ボックスが選択解除されると、その全選択ボックスが選択解除されます。リスト内の複数選択ボックスの一部が選択されている場合、全選択ボックスは中央の状態になります。

部分的に選択された状態を実現するには、リスト内の複数選択ボックスの数が選択された数と等しいかどうかを判断するために、Vue.js インスタンスで計算プロパティを定義する必要もあります。それらが等しい場合は、すべての複数選択ボックスが選択されていることを意味し、この時点ですべての選択ボックスが選択される必要があります。選択された項目の数が 0 の場合は、すべての複数選択ボックスが選択されていないことを意味します。 、この時点では全選択ボックスは選択解除されている必要があります。状態; それ以外の場合、全選択ボックスは中間の状態になります。

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

上の例では、Vue.js の計算プロパティを使用してすべての選択を実装し、allChecked 計算プロパティを定義します。 get メソッドでは、リスト内の各要素を繰り返し処理します。要素の selected 属性が false になると、複数選択ボックスのすべてが選択されていないことを示す false を返します。それ以外の場合は、すべてのチェックボックスが選択されていることを示す true を返します。 set メソッドでは、リスト内の各要素の selected 属性を指定された値に設定します。つまり、すべてを選択し、すべての選択を解除する機能を実現します。

一般に、カスタム命令を使用して複数選択ボックスの全選択操作を実装するのは非常に便利な方法です。上記の例を通じて、読者は Vue.js の select all 命令の使い方を習得したと思います。

以上がVue.jsの全選択コマンドを使用して複数の選択ボックスの全選択操作を実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。