在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
}
]接下来，在Tree组件中将该节点的selected属性映射到组件的selectedKeys属性上即可完成默认选中：
在该例子中，我们使用了ES6的Array.prototype.flatMap()方法来实现将所有选中的节点的key值映射到selectedKeys数组中。flatMap()方法可以将嵌套的数组平铺成一个一维数组。
立即学习“前端免费学习笔记（深入）”；
- 使用
defaultExpandedKeys设置默认展开节点
除了selectedKeys属性，Ant Design Vue的Tree组件还有一个defaultExpandedKeys属性，用来设置默认展开的节点。该属性接收一个字符串数组，表示哪些节点需要默认展开。
传媒企业网站系统使用热腾CMS(RTCMS),根据网站板块定制的栏目，如果修改栏目，需要修改模板相应的标签。站点内容均可在后台网站基本设置中添加。全站可生成HTML，安装默认动态浏览。并可以独立设置SEO标题、关键字、描述信息。源码包中带有少量测试数据，安装时可选择演示安装或全新安装。如果全新安装，后台内容充实后，首页才能完全显示出来。（全新安装后可以删除演示数据用到的图片，目录在https://
如果在以上的树形结构数据中，我们希望默认展开Node1节点及其子节点。那么我们可以将defaultExpandedKeys设置为：
defaultExpandedKeys: ['node1']
完整的代码如下：
总结：
设置默认选中Ant Design Vue的Tree组件可以通过在数据源中标记选中节点，在组件中映射到selectedKeys属性上实现。同时，使用defaultExpandedKeys属性可以设置默认展开的节点。
