el-tree如何实现触发指定节点的点击事件
时间: 2023-07-20 13:10:26 浏览: 594
ElementUI中el-tree节点的操作的实现
在 ElementUI 中,el-tree 组件的节点点击事件可以通过以下两种方式实现:
1. 通过在 el-tree 上绑定 @node-click 事件,在事件处理函数中获取点击的节点信息,然后根据需要执行相应的操作。示例代码如下:
```html
<template>
<el-tree :data="data" @node-click="handleNodeClick"></el-tree>
</template>
<script>
export default {
data() {
return {
data: [
{
label: 'Node 1',
children: [
{
label: 'Node 1-1'
},
{
label: 'Node 1-2'
}
]
},
{
label: 'Node 2'
}
]
}
},
methods: {
handleNodeClick(data) {
console.log(data)
// 执行相应的操作
}
}
}
</script>
```
2. 通过在 el-tree 的节点上绑定 node-key 属性,并在 el-tree 上绑定 ref,在需要触发点击事件的地方通过 this.\$refs.tree.getNode(key) 获取对应节点实例,然后调用节点实例的 doClick 方法触发点击事件。示例代码如下:
```html
<template>
<el-tree :data="data" ref="tree"></el-tree>
</template>
<script>
export default {
data() {
return {
data: [
{
label: 'Node 1',
id: 1,
children: [
{
label: 'Node 1-1',
id: 2
},
{
label: 'Node 1-2',
id: 3
}
]
},
{
label: 'Node 2',
id: 4
}
]
}
},
methods: {
triggerNodeClick(key) {
const node = this.$refs.tree.getNode(key)
node.doClick()
}
}
}
</script>
```
其中,key 为节点的唯一标识符,可以通过在节点数据中设置 id 属性来指定。需要注意的是,这种方式只能触发节点的点击事件,无法获取点击的节点信息。
阅读全文