antd vue tree设置默认选中

在vue项目中使用ant design vue组件库时，常常需要使用tree（树形控件）组件来展示层级结构数据。用户在使用tree时，可能需要默认选中某些节点，本文将介绍如何使用ant design vue的tree组件来实现默认选中。

1. 在数据源中设置默认选中

假设现在我们有如下的树形结构数据：

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

接下来，在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属性，用来设置默认展开的节点。该属性接收一个字符串数组，表示哪些节点需要默认展开。

阿里云AI平台

阿里云AI平台

下载

如果在以上的树形结构数据中，我们希望默认展开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属性上实现。同时，使用defaultExpandedKeys属性可以设置默认展开的节点。