ElementUI のネストされたテーブルに基づいて複数選択を実装するためのサンプルコード

序文：

私は友人のプロジェクトのバグを修正するのを手伝ったのでこれを書きました。
この関数を書くのは初めてです。間違いがあれば、訂正していただけると幸いです。役に立ったと思ったら、ぜひ高評価をお願いします。
コード内のキーは、Tree in js のパス検索の核心です。理解できない場合は、自分で Baidu で検索してください。必要な場合は、私にプライベートメッセージを送信してコードを要求し、どのように実装したかを確認してください。

アイデア:

この要件を最初から見ると、どこに書き込むべきかを知る必要があります。

1. 表
2. 複数選択とすべて選択
3. ネストされたデータ（ドロップダウン操作）

ちょうどいいタイミングで、ElementUIの公式ドキュメントが見つかりました

必要なAPIが見つかりました

データをネストする場合は、tree-propsを使用する必要があります
データを選択するときはtoggleRowSelectionを使用する

基本的には上記の方法で始めることができます。

成し遂げる：

上記に基づいて、HTML構造を記述することができます。

<テンプレート>
 <div>
  <el-テーブル
   ref="複数のテーブル"
   :data="テーブルデータ"
   スタイル="幅: 100%; 下マージン: 20px"
   行キー="id"
   国境
   デフォルトすべて展開
   :不確定時に選択="true"
   :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
   @select="行選択"
   @select-all="すべて選択"
  >
   <el-table-column type="selection" width="55"> </el-table-column>
   <el-table-column prop="date" label="日付" width="180"> </el-table-column>
   <el-table-column prop="name" label="姓名" width="180"> </el-table-column>
   <el-table-column prop="address" label="住所"></el-table-column>
  </el-table>
 </div>
</テンプレート>

フォームの複数選択は2つの項目に分けられます。1つは正の選択で、チェックアウトが真のときを意味し、2つ目は逆のキャンセルで、チェックアウトが偽のときを意味します。次に、この正の選択と逆のキャンセルを実装する方法を分析します。

1. 正の選択

次のようなデータがあるとします。
子ノードをクリックするときは、親ノードと子ノードのルートノードの両方を同時に選択する必要があります。
ルートノード-親ノード-子ノード
図2は私のデータで宣言されたデータで、isCheckedが選択されているかどうか、childrenに子ノードがあるかどうかなどが含まれています。

何を選択するかが明確になったので、それをどのように実装すればよいでしょうか?

子ノードをクリックすると、その子ノードの親ノードをルートノードまで記録する必要があるので、ツリーの概念を使用します。

次のコードはツリーバックトラッキングの考え方を使用しています。クリックした子ノードがどのサブツリー上にあるかわからないため、パス検索では事前順序トラバーサルを使用します。
Treeメソッドの具体的なアイデアについては、Baiduで検索してください。

treeFindPath(ツリー、関数、パス = []) {
   if (!tree) は [] を返します。
   for (ツリーの定数データ) {
    パスをプッシュします(データ);
    if (func(data)) はパスを返します。
    if (データ.children) {
     const findChildren = this.treeFindPath(data.children, func, path);
     findChildren.length の場合、findChildren を返します。
    }
    パスをポップします。
   }
   戻る [];
  },

上記のコードを呼び出すと、ノード ID を渡すとそのパス上のオブジェクトを含む配列が返されます。このようにして、配列をループし、toggleRowSelection メソッドを使用してページステータススタイルを変更できます。

2. キャンセルの取り消し

逆キャンセルは選択の逆です。キャンセルする子ノードをクリックする場合、同じレベルのすべてのノードがキャンセルされているかどうかを判断する必要があります。すべてのノードがキャンセルされている場合は、このノードの親ノードをキャンセル状態に変更し、次にその親ノードの同じレベルのすべてのノードがキャンセル状態であるかどうかを確認する必要があります。キャンセル状態がまだある場合は、条件が満たされなくなるまで前と同じ方法で親ノードを検索し続け、ループを終了します。

簡単な概略図

ノード4をクリックすると、同じレベルのノード5と6がキャンセル状態かどうかを確認します。両方ともキャンセル状態の場合は、親ノード2を確認し、2をfalseに変更してから、2の同じレベルの3がキャンセルされているかどうかを確認します。キャンセルされている場合は、1を確認します。
同じレベルを選択した場合は、次のステップを踏まずに直接ループから抜け出します。

以下はチェックを外すコードです

引き続き Tree コードを使用して、取得した配列を逆順にします。最初のループはノードをクリックしてオンラインで検索することから始まり、ここでは for ループが使用されます。満たされない場合、後続のループは直接終了します。

3. すべて選択

ちょっと書きすぎたような気がします。
すべて選択する場合、まずデータ内の isChecked を通じて未チェックのデータがあるかどうかを再帰的に判断します。未チェックのデータがある場合は、すべてのデータ内の isChecked を再帰的に true に変更します。すべて選択されている場合は、再帰的に false に変更します。

以下は選択されたすべてのコードです

  /**
   * @describe すべて選択*/
  すべて選択(選択) {
   console.log(選択);
   isAllCheck を this.selectAllRecursion(this.tableData); とします。
   // aa が false かどうかは、チェックされているかどうかを表します this.checkoutAll(this.tableData, !isAllCheck);
  },
  /**
   * @describe は isChecked が true かどうかを再帰的にチェックします。false はチェックされていないことを意味します */
  selectAllRecursion(arr) {
   isCheck を true にします。
   関数isRecursion(arr) {
    arr.forEach((アイテム) => {
     チェックされている場合
      isCheck = false;
      if (item.children) {
       再帰はitem.childrenに行われます。
      }
     }
    });
   }
   再帰はarrです。
   isCheck を返します。
  },
  /**
   * @describe すべての値をtrueまたはfalseに変更します
   */
  checkoutAll(arr, ブール値) {
   var _this = これ;
   関数 allCheck(arr, ブール値) {
    arr.forEach((アイテム) => {
     項目がチェックされているかどうか。
     _this.$refs.multipleTable.toggleRowSelection(item, ブール値);
     if (item.children) {
      すべてのチェック(item.children, ブール値);
     }
    });
   }
   allCheck(arr, ブール値);
  },

終わり：

基本的なコードは上記の通りですが、テーブルページング機能は除きます。

これで、ElementUI のネストされたテーブルに基づいて複数選択を実装するためのサンプルコードに関するこの記事は終了です。ElementUI テーブルでのネストされた複数選択の詳細については、123WORDPRESS.COM の以前の記事を検索するか、次の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

以下もご興味があるかもしれません: