要素のel-tree複数選択ツリー（チェックボックス）親子ノードの関連付けが関連付けられていません

属性チェック-厳密

公式ドキュメントでは、チェックボックスが表示されるときに親項目と子項目を互いに関連付けないという慣行に厳密に従うかどうかを決定するプロパティ check-strictly が提供されています。デフォルト値は false です。
このプロパティは以下を意味します。
デフォルト値は false で、親子関係を示します。次のような現象や問題があります。
1. 関数を通じてチェックノードを設定すると、親ノードがチェックされている限り、設定されたチェックリストにそのような子ノードがなくても、子ノードがチェックされます。
2. チェックボックスをクリックしてチェックすると、親ノードをクリックすると、そのすべての子ノードが親ノードの変更に従います。子ノードをクリックすると、子ノードが部分的にチェックされている場合は親ノードが半分選択され、すべての子ノードがチェックされている場合は親ノードが選択され、すべての子ノードがチェックされていない場合は親ノードのチェックが解除されます。
親子関係を厳密に遵守するには true に設定します。
1. 関数を通じてチェックノードを設定する場合、チェックされるかどうかは、チェックリストにこのノードがあるかどうかによって厳密に決定されます。
2. チェックボックスをクリックしてチェックすると、どのノードをクリックしても、現在のノードのチェック状態のみが変更されます。半選択状態はありません。

システムキャラクターメニューコントロールの問題

問題は、システムのキャラクターメニューを制御するときに、次の条件を満たす必要があることです。
1. 関数を通じてチェックノードを設定する場合、チェックリストにこのノードがあるかどうかで厳密にチェックするかどうかを決定する必要があります。つまり、親ノードはチェックしますが、必ずしもすべての子ノードをチェックする必要はありません。
2. チェックボックスをクリックしてチェックを入れた場合、親ノードをクリックすると、その下のすべての子ノードが親ノードの変更に従います。
3. チェックボックスをクリックした状態で子ノードをクリックすると、子ノードが部分的にチェックされているときは親ノードが半選択され、すべての子ノードがチェックされているときは親ノードが選択され、すべての子ノードがチェックされていないときは親ノードが選択解除されます。

要件：

1. check-strictly=false は機能しない

満たす必要のある条件によれば、check-strictly が false に設定されていることは明らかなので、check-strictly=false と親と子の相互関係を基礎として、解決する必要のある問題は次のとおりです。
完全にチェックされていない子ノードに対応する親ノードを半分チェックされた状態に変更しますが、ドキュメント検索は長い間成果を上げていません。
getHalfCheckedKeys と getHalfCheckedNodes のみが半分チェックに設定されていません。

2. check-strictly=true を試してください

親と子が互いに関連しないという原則に厳密に従うには、check-strictly=true から始めて、check-strictly を true に設定することしかできません。解決する必要がある問題は次のとおりです。
1. チェックボックスをクリックしてチェックを入れた場合、親ノードをクリックすると、その下のすべての子ノードが親ノードの変更に従います。
2. チェックボックスをクリックした状態で子ノードをクリックすると、子ノードが部分的にチェックされているときは親ノードが半選択され、すべての子ノードがチェックされているときは親ノードが選択され、すべての子ノードがチェックされていないときは親ノードが選択解除されます。
親ノードと子ノードが厳密に関連していない場合、親ノードと子ノードをクリックしても半選択状態にはならず、関数を通じて半選択状態を設定することはできません。解決策は、問題を単純化することです。
1. チェックボックスをクリックしてチェックすると、ステータスが選択されます。
1.1. 現在のノードの変更に続いて、そのすべての親ノード(親ノード、親ノードの親ノードなど) がすべて均一に選択されます。
1.2. その下のすべての子ノードが親ノードと同時に選択されます。
2. チェックボックスをクリックしてチェックすると、ステータスがチェックなしの場合、その下のすべての子ノードが親ノードに従ってチェックなしに変更されます。

ソリューションコード:

1. el-tree タグの属性

<el-tree ref="tree" :data="treeMenus" :props="multiProps" :show-checkbox="true"
 node-key="menuId" ハイライト現在の値:expand-on-click-node="false" 
 :default-checked-keys="checkedId" :check-strictly="true" @check="clickDeal">

ノードキー: 各ツリーノードの一意の識別子として使用される属性。ツリー全体が一意である必要があります。ノードを一意に識別するキー値。
default-checked-keys = checkedId: el-tree マルチ選択ツリーコンポーネントが初期化されるときにデフォルトで選択された ID に対応します。
check-strictly = true: 親と子が互いに血縁関係を持たないという慣習を厳密に守るかどうか
check: チェックボックスがクリックされたときに実行されるメソッド
props: 設定オプション。詳細については下の図を参照してください。

ここに画像の説明を挿入

バックエンドの応答によると、:props="multiProps" の場合、設定は次のようになります。

マルチプロパティ: {
  子供: 「子供」,
  ラベル: '名前',
  無効: this.isDisabled
}

childrens フィールドは子ノードとして識別され、name はノード名です。デフォルトでは、children は子ノードとして識別され、label はノード名です。

2. el-treeコンポーネントが変更されたときに複数選択ツリーを再割り当てする

更新されました（）{
 // 複数選択ツリーのデフォルト値を設定します this.$refs.tree.setCheckedKeys(this.checkedId)
},

checkId は、親ノードと子ノードを区別しない、チェックされたノードの配列です。

3. チェックボックスをクリックしたときの特別な処理

クリックディール (currentObj, treeStatus) {
  // 使用目的: 親ノードと子ノードが厳密に無関係な場合、親ノードは、親ノードがチェックされたときに子ノードに同期して変更するように通知し、一方向の関連付けを実現します。
  let selected = treeStatus.checkedKeys.indexOf(currentObj.menuId) // -1 は選択されていません // 選択されています if (selected !== -1) {
    // 親ノードが選択されている限り、子ノードも選択されます this.selectedParent(currentObj)
    // 子ノードの処理を同じチェック状態に統一します this.uniteChildSame(currentObj, true)
  } それ以外 {
    // 未選択処理: すべての子ノードが未選択 if (currentObj.childs.length !== 0) {
      this.uniteChildSame(現在のオブジェクト、false)
    }
  }
},
// 同じチェックステータスを持つ子ノードの処理を統合する uniteChildSame (treeList, isSelected) {
  this.$refs.tree.setChecked(treeList.menuId、isSelected) を設定します。
  (i = 0 とします; i < treeList.childs.length; i++) {
    this.uniteChildSame(treeList.childs[i], isSelected)
  }
},
// 選択された親ノードの統合処理 selectedParent (currentObj) {
  currentNode = this.$refs.tree.getNode(currentObj) とします。
  (currentNode.parent.key !== 未定義)の場合{
    this.$refs.tree.setChecked(currentNode.parent, true)
    this.selectedParent(現在のノードの親)
  }
},

要素のel-tree複数選択ツリー（チェックボックス）の親子ノードの関連付けまたは非関連付けに関するこの記事はこれで終わりです。要素のel-tree複数選択ツリーの非関連付けに関するその他の関連コンテンツについては、123WORDPRESS.COMの以前の記事を検索するか、次の関連記事を引き続き参照してください。今後とも123WORDPRESS.COMをよろしくお願いいたします。

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