les paramètres de l'arborescence antd vue sont sélectionnés par défaut

Lors de l'utilisation de la bibliothèque de composants Ant Design Vue dans un projet Vue, il est souvent nécessaire d'utiliser le composant Tree (contrôle d'arborescence) pour afficher les données de structure hiérarchique. Lorsque les utilisateurs utilisent Tree, ils peuvent avoir besoin de sélectionner certains nœuds par défaut. Cet article explique comment utiliser le composant Tree d'Ant Design Vue pour obtenir une sélection par défaut.

1. Définissez la sélection par défaut dans la source de données

Supposons maintenant que nous ayons les données de structure arborescente suivantes :

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

Nous voulons que le nœud Node1.1.2 soit sélectionné par défaut. Ensuite, nous pouvons ajouter un attribut selected à l'objet de données du nœud et le définir sur true : Node1.1.2节点。那么我们可以在该节点的数据对象中添加一个selected属性，并将它设置为true：

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

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

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

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

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

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

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

defaultExpandedKeys: ['node1']

完整的代码如下：

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

总结：

设置默认选中Ant Design Vue的Tree组件可以通过在数据源中标记选中节点，在组件中映射到selectedKeys属性上实现。同时，使用defaultExpandedKeysrrreee

Ensuite, définissez le selecteddu nœud. > est mappé à l'attribut selectedKeys du composant pour compléter la sélection par défaut : 🎜rrreee🎜Dans cet exemple, nous utilisons la méthode Array.prototype.flatMap () d'ES6 pour mapper les valeurs key de tous les nœuds sélectionnés au tableau selectedKeys. La méthode flatMap() peut aplatir des tableaux imbriqués en un tableau unidimensionnel. 🎜

🎜Utilisez defaultExpandedKeys pour définir le nœud développé par défaut🎜🎜🎜En plus de l'attribut selectedKeys, le composant Tree d'Ant Design Vue dispose également d'un defaultExpandedKeys Attribut, utilisé pour définir le nœud développé par défaut. Cette propriété reçoit un tableau de chaînes indiquant quels nœuds doivent être développés par défaut. 🎜🎜Si dans les données de l'arborescence ci-dessus, nous espérons développer le nœud Node1 et ses nœuds enfants par défaut. Ensuite, nous pouvons définir defaultExpandedKeys sur : 🎜rrreee🎜Le code complet est le suivant : 🎜rrreee🎜Résumé : 🎜🎜Définissez le composant Tree d'Ant Design Vue sélectionné par défaut en marquant le nœud sélectionné dans la source de données, in Implémenté dans le composant en mappant sur l'attribut selectedKeys. En même temps, utilisez l'attribut defaultExpandedKeys pour définir les nœuds développés par défaut. 🎜

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!