iview tree 选中
时间: 2023-09-16 20:06:41 浏览: 94
treeview自制控件,支持全选,非全选,取消
要在 iView Tree 中选中某个节点,可以使用 `selected` 属性来指定选中的节点。例如:
```html
<template>
<div>
<Tree :data="data" :selected="selectedNode" @on-select="onSelect"></Tree>
</div>
</template>
<script>
export default {
data() {
return {
data: [
{
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",
children: [
{
title: "Node 2-1",
key: "2-1"
},
{
title: "Node 2-2",
key: "2-2"
}
]
}
],
selectedNode: "1-1"
};
},
methods: {
onSelect(node) {
console.log(node);
}
}
};
</script>
```
在上述代码中,我们指定了 `selectedNode` 属性为 `"1-1"`,表示默认选中树形结构中的 `"Node 1-1"` 节点。同时,我们还定义了 `on-select` 事件来监听节点选中事件,当用户点击节点时,会触发该事件,并将选中的节点信息传递给 `onSelect` 方法。
阅读全文