antd vue ツリー設定はデフォルトで選択されています-フロントエンドQ&A-php.cn

antd vue ツリー設定はデフォルトで選択されています

WBOY

リリース： 2023-05-08 09:34:07

オリジナル

2640 人が閲覧しました

Vue プロジェクトで Ant Design Vue コンポーネントライブラリを使用する場合、多くの場合、階層構造データを表示するために Tree (ツリーコントロール) コンポーネントを使用する必要があります。ユーザーが Tree を使用する場合、デフォルトで特定のノードを選択する必要がある場合があります。この記事では、Ant Design Vue の Tree コンポーネントを使用してデフォルトの選択を実現する方法を紹介します。

データソースでデフォルトの選択を設定します

次のツリー構造データがあると仮定します:

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

ログイン後にコピー

デフォルトの選択が必要です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
  }
]

ログイン後にコピー

に設定します。次に、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() このメソッドは、ネストされた配列を 1 次元配列にフラット化できます。

defaultExpandedKeysデフォルトの展開ノードを設定します

selectedKeys 属性に加えて、Ant Design Vue のツリーコンポーネントもdefaultExpandedKeysAttribute があり、デフォルトの展開されたノードを設定するために使用されます。このプロパティは、デフォルトでどのノードを展開する必要があるかを示す文字列の配列を受け取ります。

上記のツリー構造データの場合、デフォルトで

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 のツリーコンポーネントを設定します。これは、データソースで選択されたノードをマークし、それをコンポーネントの

selectedKeys 属性にマッピングすることで実現できます。同時に、defaultExpandedKeys 属性を使用して、デフォルトの展開ノードを設定します。

以上がantd vue ツリー設定はデフォルトで選択されていますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。