Die AntD-Vue-Baumeinstellungen sind standardmäßig ausgewählt

Bei Verwendung der Ant Design Vue-Komponentenbibliothek in einem Vue-Projekt ist es häufig erforderlich, die Komponente Tree (Baumsteuerung) zu verwenden, um hierarchische Strukturdaten anzuzeigen. Wenn Benutzer Tree verwenden, müssen sie möglicherweise bestimmte Knoten standardmäßig auswählen. In diesem Artikel wird erläutert, wie die Tree-Komponente von Ant Design Vue verwendet wird, um eine Standardauswahl zu erreichen.

1. Standardauswahl in der Datenquelle festlegen

Angenommen, wir haben jetzt die folgenden Baumstrukturdaten:

treeData: [
  {
    title: 'Node1',
    key: 'node1',
    children: [
      {
        title: 'Node1.1',
        key: 'node1-1',
        children: [
          {
            title: 'Node1.1.1',
            key: 'node1-1-1',
            isLeaf: true
          },
          {
            title: 'Node1.1.2',
            key: 'node1-1-2',
            isLeaf: true
          }
        ]
      },
      {
        title: 'Node1.2',
        key: 'node1-2',
        isLeaf: true
      }
    ]
  },
  {
    title: 'Node2',
    key: 'node2',
    isLeaf: true
  }
]

#🎜🎜 #Wir möchten, dass der Knoten Node1.1.2 standardmäßig ausgewählt wird. Dann können wir dem Datenobjekt des Knotens ein selected-Attribut hinzufügen und es auf true setzen:

treeData: [
  {
    title: 'Node1',
    key: 'node1',
    children: [
      {
        title: 'Node1.1',
        key: 'node1-1',
        children: [
          {
            title: 'Node1.1.1',
            key: 'node1-1-1',
            isLeaf: true
          },
          {
            title: 'Node1.1.2',
            key: 'node1-1-2',
            isLeaf: true,
            selected: true // 将该节点设置为默认选中
          }
        ]
      },
      {
        title: 'Node1.2',
        key: 'node1-2',
        isLeaf: true
      }
    ]
  },
  {
    title: 'Node2',
    key: 'node2',
    isLeaf: true
  }
]

Node1.1.2节点。那么我们可以在该节点的数据对象中添加一个selected属性，并将它设置为true：

<template>
  <a-tree :tree-data="treeData" :selected-keys="selectedKeys"></a-tree>
</template>

<script>
export default {
  data() {
    return {
      treeData: [
        {
          title: 'Node1',
          key: 'node1',
          children: [
            {
              title: 'Node1.1',
              key: 'node1-1',
              children: [
                {
                  title: 'Node1.1.1',
                  key: 'node1-1-1',
                  isLeaf: true
                },
                {
                  title: 'Node1.1.2',
                  key: 'node1-1-2',
                  isLeaf: true,
                  selected: true // 将该节点设置为默认选中
                }
              ]
            },
            {
              title: 'Node1.2',
              key: 'node1-2',
              isLeaf: true
            }
          ]
        },
        {
          title: 'Node2',
          key: 'node2',
          isLeaf: true
        }
      ],
      selectedKeys: []
    };
  },

  mounted() {
    this.selectedKeys = this.treeData.flatMap(node => {
      if (node.selected) {
        return node.key;
      } else if (node.children) {
        return node.children.flatMap(child => {
          if (child.selected) {
            return child.key;
          } else {
            return [];
          }
        });
      } else {
        return [];
      }
    });
  }
};
</script>

接下来，在Tree组件中将该节点的selected属性映射到组件的selectedKeys属性上即可完成默认选中：

defaultExpandedKeys: ['node1']

在该例子中，我们使用了ES6的Array.prototype.flatMap()方法来实现将所有选中的节点的key值映射到selectedKeys数组中。flatMap()方法可以将嵌套的数组平铺成一个一维数组。

2. 使用defaultExpandedKeys设置默认展开节点

除了selectedKeys属性，Ant Design Vue的Tree组件还有一个defaultExpandedKeys属性，用来设置默认展开的节点。该属性接收一个字符串数组，表示哪些节点需要默认展开。

如果在以上的树形结构数据中，我们希望默认展开Node1节点及其子节点。那么我们可以将defaultExpandedKeys设置为：

<template>
  <a-tree :tree-data="treeData" :selected-keys="selectedKeys" :default-expanded-keys="defaultExpandedKeys"></a-tree>
</template>

<script>
export default {
  data() {
    return {
      treeData: [
        {
          title: 'Node1',
          key: 'node1',
          children: [
            {
              title: 'Node1.1',
              key: 'node1-1',
              children: [
                {
                  title: 'Node1.1.1',
                  key: 'node1-1-1',
                  isLeaf: true
                },
                {
                  title: 'Node1.1.2',
                  key: 'node1-1-2',
                  isLeaf: true,
                  selected: true // 将该节点设置为默认选中
                }
              ]
            },
            {
              title: 'Node1.2',
              key: 'node1-2',
              isLeaf: true
            }
          ]
        },
        {
          title: 'Node2',
          key: 'node2',
          isLeaf: true
        }
      ],
      selectedKeys: [],
      defaultExpandedKeys: ['node1'] // 将node1设置为默认展开节点
    };
  },

  mounted() {
    this.selectedKeys = this.treeData.flatMap(node => {
      if (node.selected) {
        return node.key;
      } else if (node.children) {
        return node.children.flatMap(child => {
          if (child.selected) {
            return child.key;
          } else {
            return [];
          }
        });
      } else {
        return [];
      }
    });
  }
};
</script>

完整的代码如下：

rrreee

总结：

设置默认选中Ant Design Vue的Tree组件可以通过在数据源中标记选中节点，在组件中映射到selectedKeys属性上实现。同时，使用defaultExpandedKeysAls nächstes im Baum Im Komponente, ordnen Sie das Attribut selected des Knotens dem Attribut selectedKeys der Komponente zu, um die Standardauswahl zu vervollständigen:

rrreee#🎜🎜#In diesem Beispiel haben wir Die ES6-Methode Array.prototype.flatMap() wird verwendet, um die key-Werte aller ausgewählten Knoten dem selectedKeys-Array zuzuordnen. Die Methode flatMap() kann verschachtelte Arrays zu einem eindimensionalen Array zusammenfassen. #🎜🎜#

#🎜🎜#Verwenden Sie defaultExpandedKeys, um den standardmäßigen erweiterten Knoten festzulegen #🎜🎜##🎜🎜##🎜🎜#Zusätzlich zu selectedKeys -Attribut, die Tree-Komponente von Ant Design Vue verfügt auch über ein defaultExpandedKeys-Attribut, das zum Festlegen der standardmäßigen erweiterten Knoten verwendet wird. Diese Eigenschaft empfängt ein Array von Zeichenfolgen, die angeben, welche Knoten standardmäßig erweitert werden müssen. #🎜🎜##🎜🎜#Wenn in den obigen Baumstrukturdaten, hoffen wir, den Knoten Node1 und seine untergeordneten Knoten standardmäßig zu erweitern. Dann können wir defaultExpandedKeys auf Folgendes setzen: #🎜🎜#rrreee#🎜🎜#Der vollständige Code lautet wie folgt: #🎜🎜#rrreee#🎜🎜#Zusammenfassung: #🎜🎜##🎜🎜#Set Die Standardkomponente „Auswählen des Baums“ von Ant Design Vue kann erreicht werden, indem der ausgewählte Knoten in der Datenquelle markiert und dem Attribut selectedKeys in der Komponente zugeordnet wird. Verwenden Sie gleichzeitig das Attribut defaultExpandedKeys, um die standardmäßigen erweiterten Knoten festzulegen. #🎜🎜#

Das obige ist der detaillierte Inhalt vonDie AntD-Vue-Baumeinstellungen sind standardmäßig ausgewählt. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!