在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属性上即可完成默认选中：
<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属性上实现。同时，使用defaultexpandedkeys属性可以设置默认展开的节点。
以上就是antd vue tree设置默认选中的详细内容。