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로 설정할 수 있습니다. 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()方法可以将嵌套的数组平铺成一个一维数组。

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

다음으로 노드의 selected를 설정합니다. > 속성은 구성 요소의 selectedKeys 속성에 매핑되어 기본 선택을 완료합니다. 🎜rrreee🎜이 예에서는 ES6의 Array.prototype.FlatMap () 메서드를 사용하여 선택한 모든 노드의 key 값을 selectedKeys 배열에 매핑합니다. flatMap() 메서드는 중첩 배열을 1차원 배열로 평면화할 수 있습니다. 🎜

defaultExpandedKeys

selectedKeys

defaultExpandedKeys

Node1

defaultExpandedKeys

selectedKeys

defaultExpandedKeys

위 내용은 antd vue 트리 설정은 기본적으로 선택됩니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!