Die Eltern-Kind-Knoten-Zuordnung des El-Tree-Mehrfachauswahlbaums (Kontrollkästchen) des Elements ist nicht zugeordnet

Streng geprüfte Attribute

Das offizielle Dokument enthält die Eigenschaft check-strictly, die bestimmt, ob die Vorgehensweise, übergeordnete und untergeordnete Elemente nicht miteinander zu verknüpfen, strikt befolgt werden soll, wenn ein Kontrollkästchen angezeigt wird. Der Standardwert ist „false“.
Diese Eigenschaft bedeutet:
Der Standardwert ist „false“, was auf eine Eltern-Kind-Beziehung hinweist. Es treten folgende Phänomene und Probleme auf:
1. Wenn Sie über eine Funktion einen Prüfknoten festlegen, wird der untergeordnete Knoten geprüft, solange der übergeordnete Knoten geprüft ist, auch wenn in der festgelegten Prüfliste kein solcher untergeordneter Knoten vorhanden ist.
2. Wenn Sie das Kontrollkästchen aktivieren und auf den übergeordneten Knoten klicken, folgen alle seine untergeordneten Knoten den Änderungen des übergeordneten Knotens. Wenn Sie auf den untergeordneten Knoten klicken, wird der übergeordnete Knoten zur Hälfte ausgewählt, wenn der untergeordnete Knoten teilweise aktiviert ist. Der übergeordnete Knoten wird ausgewählt, wenn alle untergeordneten Knoten aktiviert sind, und der übergeordnete Knoten wird deaktiviert, wenn alle untergeordneten Knoten deaktiviert sind.
Auf „True“ setzen, um die Eltern-Kind-Beziehung strikt einzuhalten.
1. Wenn Sie über eine Funktion einen Prüfknoten festlegen, wird die Überprüfung, ob dieser geprüft wird, streng dadurch bestimmt, ob dieser Knoten in der Prüfliste vorhanden ist.
2. Wenn Sie ein Kontrollkästchen aktivieren, wird unabhängig davon, auf welchen Knoten Sie klicken, nur der Aktivierungsstatus des aktuellen Knotens geändert. Es gibt keinen halb ausgewählten Status.

Probleme mit der Systemzeichenmenüsteuerung

Das Problem besteht darin, dass bei der Steuerung des Zeichenmenüs des Systems folgende Bedingungen erfüllt sein müssen:
1. Wenn Sie über eine Funktion einen Prüfknoten festlegen, müssen Sie genau bestimmen, ob die Prüfung durchgeführt wird, indem Sie bestimmen, ob sich dieser Knoten in der Prüfliste befindet. Das heißt, es muss der übergeordnete Knoten geprüft werden, aber nicht unbedingt alle untergeordneten Knoten.
2. Wenn Sie das Kontrollkästchen aktivieren und anschließend auf den übergeordneten Knoten klicken, folgen alle darunter liegenden untergeordneten Knoten den Änderungen des übergeordneten Knotens.
3. Wenn Sie das Kontrollkästchen aktivieren und auf einen untergeordneten Knoten klicken, wird der übergeordnete Knoten zur Hälfte ausgewählt, wenn der untergeordnete Knoten teilweise aktiviert ist. Der übergeordnete Knoten wird ausgewählt, wenn alle untergeordneten Knoten aktiviert sind, und die Auswahl des übergeordneten Knotens wird aufgehoben, wenn alle untergeordneten Knoten deaktiviert sind.

Anforderungen:

1. check-strictly=false funktioniert nicht

Gemäß den zu erfüllenden Bedingungen ist es offensichtlich, dass check-strictly auf false gesetzt ist. Ausgehend von der wechselseitigen Beziehung zwischen check-strictly = false und dem übergeordneten Element und dem untergeordneten Element muss daher das folgende Problem gelöst werden:
Ändern Sie den übergeordneten Knoten, der dem untergeordneten Knoten entspricht, der nicht vollständig in einen halb geprüften Zustand geprüft wurde, aber die Dokumentsuche war lange Zeit erfolglos.
Nur getHalfCheckedKeys und getHalfCheckedNodes sind nicht auf halb geprüft eingestellt.

2. check-strictly=true, probier es aus

Sie können nur versuchen, check-strictly auf true zu setzen, beginnend mit check-strictly=true, um strikt dem Prinzip zu folgen, dass Eltern und Kind nicht miteinander verwandt sind. Das Problem, das gelöst werden muss, ist:
1. Wenn Sie das Kontrollkästchen aktivieren und anschließend auf den übergeordneten Knoten klicken, folgen alle darunter liegenden untergeordneten Knoten den Änderungen des übergeordneten Knotens.
2. Wenn Sie das Kontrollkästchen aktivieren und auf einen untergeordneten Knoten klicken, wird der übergeordnete Knoten zur Hälfte ausgewählt, wenn der untergeordnete Knoten teilweise aktiviert ist. Der übergeordnete Knoten wird ausgewählt, wenn alle untergeordneten Knoten aktiviert sind, und die Auswahl des übergeordneten Knotens wird aufgehoben, wenn alle untergeordneten Knoten deaktiviert sind.
Wenn die übergeordneten und untergeordneten Knoten nicht streng miteinander verbunden sind, führt das Klicken auf die übergeordneten und untergeordneten Knoten nicht zu einem halb ausgewählten Zustand, und der halb ausgewählte Zustand kann nicht durch eine Funktion festgelegt werden. Die Lösung besteht darin, das Problem zu vereinfachen:
1. Wenn Sie das Kontrollkästchen aktivieren und der Status ausgewählt ist:
1.1. Alle seine übergeordneten Knoten (übergeordneter Knoten, übergeordneter Knoten des übergeordneten Knotens usw.) werden nach der Änderung des aktuellen Knotens alle einheitlich ausgewählt .
1.2. Alle darunter liegenden untergeordneten Knoten werden gemeinsam mit dem übergeordneten Knoten ausgewählt .
2. Wenn Sie das Kontrollkästchen aktivieren und der Status deaktiviert ist, folgen alle darunter liegenden untergeordneten Knoten dem übergeordneten Knoten und werden in „Deaktiviert“ geändert.

Lösungscode:

1. el-tree-Tag-Attribute

<el-tree ref="Baum" :data="treeMenus" :props="multiProps" :show-checkbox="true"
 Knotenschlüssel = "Menü-ID" aktuelle Hervorhebung: Erweitern beim Klicken auf Knoten = "falsch" 
 :default-checked-keys="checkedId" :check-strictly="true" @check="clickDeal">

Knotenschlüssel: Das Attribut, das als eindeutiger Bezeichner für jeden Baumknoten verwendet wird. Der gesamte Baum sollte eindeutig sein. Ein Schlüsselwert, der einen Knoten eindeutig identifiziert.
default-checked-keys = checkedId: entspricht der standardmäßig ausgewählten ID, wenn die el-tree Multi-Select-Baumkomponente initialisiert wird
check-strictly = true: Ob die Praxis, dass Eltern und Kinder nicht miteinander verwandt sein dürfen, strikt befolgt werden soll
check: Die Methode, die ausgelöst wird, wenn das Kontrollkästchen angeklickt wird
Requisiten: Konfigurationsoptionen, Einzelheiten finden Sie in der Abbildung unten.

Laut der Antwort des Backends lautet meine Konfiguration für :props="multiProps":

multiProps: {
  Kinder: 'Kinder',
  Bezeichnung: "Name",
  deaktiviert: this.isDisabled
}

Das Feld „Kinder“ wird als untergeordneter Knoten identifiziert und „Name“ ist der Knotenname. Standardmäßig wird „Kinder“ als untergeordneter Knoten identifiziert und „Label“ ist der Knotenname.

2. Weisen Sie den Mehrfachauswahlbaum neu zu, wenn sich die El-Tree-Komponente ändert

aktualisiert () {
 // Legen Sie den Standardwert für den Mehrfachauswahlbaum this.$refs.tree.setCheckedKeys(this.checkedId) fest.
},

checkedId ist ein Array von geprüften Knoten, ohne zwischen übergeordneten und untergeordneten Knoten zu unterscheiden.

3. Sonderverarbeitung beim Anklicken eines Kontrollkästchens

KlickDeal (aktuellesObjekt, Baumstatus) {
  // Wird verwendet für: Wenn zwischen den übergeordneten und untergeordneten Knoten keine strikte Beziehung besteht, benachrichtigt der übergeordnete Knoten den untergeordneten Knoten über eine synchrone Änderung, wenn der übergeordnete Knoten überprüft wird, wodurch eine unidirektionale Zuordnung realisiert wird.
  let selected = treeStatus.checkedKeys.indexOf(currentObj.menuId) // -1 ist nicht ausgewählt // ausgewählt if (selected !== -1) {
    // Solange der übergeordnete Knoten ausgewählt ist, ist der untergeordnete Knoten ausgewählt. this.selectedParent(currentObj)
    // Vereinheitlichen Sie die Verarbeitung der untergeordneten Knoten auf denselben Prüfstatus. this.uniteChildSame(currentObj, true)
  } anders {
    // Nicht ausgewählte Verarbeitung: Alle untergeordneten Knoten werden nicht ausgewählt, wenn (currentObj.childs.length !== 0) {
      dies.uniteChildSame(aktuellesObj, false)
    }
  }
},
// Vereinheitliche die Verarbeitung von untergeordneten Knoten mit demselben Prüfstatus uniteChildSame (treeList, isSelected) {
  dies.$refs.tree.setChecked(treeList.menuId, isSelected)
  für (lass i = 0; i < treeList.childs.length; i++) {
    dies.uniteChildSame(treeList.childs[i], istAusgewählt)
  }
},
// Einheitliche Verarbeitung der übergeordneten Knoten als ausgewählt selectedParent (currentObj) {
  lass currentNode = this.$refs.tree.getNode(currentObj)
  wenn (currentNode.parent.key !== undefiniert) {
    dies.$refs.tree.setChecked(currentNode.parent, true)
    dies.selectedParent(aktuellerKnoten.übergeordnet)
  }
},

Dies ist das Ende dieses Artikels über die Zuordnung oder Nichtzuordnung von übergeordneten und untergeordneten Knoten des El-Tree-Multiple-Select-Trees (Kontrollkästchen) des Elements. Weitere verwandte Inhalte zum El-Tree-Multiple-Select-Tree und zur Nichtzuordnung des Elements finden Sie in den vorherigen Artikeln von 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, Sie werden 123WORDPRESS.COM auch in Zukunft unterstützen!