ant-design-vue的树形控件获取选中的节点有那些
时间: 2023-07-16 11:15:07 浏览: 190
在ant-design-vue中,可以通过以下方法获取树形控件中选中的节点:
1. 使用`v-model`指令来绑定选中的节点数组,例如:
```
<template>
<a-tree :tree-data="treeData" v-model:selected-keys="selectedKeys"></a-tree>
</template>
<script>
export default {
data() {
return {
treeData: [
{
title: 'Node 1',
key: '1',
children: [
{
title: 'Node 1-1',
key: '1-1'
},
{
title: 'Node 1-2',
key: '1-2'
}
]
},
{
title: 'Node 2',
key: '2'
}
],
selectedKeys: []
}
}
}
</script>
```
在上述例子中,`selectedKeys`数组会自动更新为当前选中的节点的`key`值。
2. 使用`@select`事件来监听选中节点的变化,例如:
```
<template>
<a-tree :tree-data="treeData" @select="handleSelect"></a-tree>
</template>
<script>
export default {
data() {
return {
treeData: [
{
title: 'Node 1',
key: '1',
children: [
{
title: 'Node 1-1',
key: '1-1'
},
{
title: 'Node 1-2',
key: '1-2'
}
]
},
{
title: 'Node 2',
key: '2'
}
]
}
},
methods: {
handleSelect(selectedKeys, info) {
console.log(selectedKeys)
}
}
}
</script>
```
在上述例子中,`handleSelect`方法会在选中节点变化时被调用,参数`selectedKeys`即为当前选中的节点的`key`值数组。
阅读全文
相关推荐


















