如何触发子组件中el-tree的node-click指定节点被选中事件
时间: 2024-01-12 07:03:03 浏览: 104
vue el-tree 默认展开第一个节点的实现代码
可以通过在父组件中监听子组件的事件,在事件回调函数中调用子组件中的方法来触发el-tree的node-click指定节点被选中事件。
具体步骤如下:
1. 在子组件中定义一个方法,用于触发el-tree的node-click指定节点被选中事件,例如:
```
methods: {
selectNode(node) {
this.$refs.tree.setCurrentKey(node.key);
}
}
```
2. 在子组件中触发该方法,例如:
```
<template>
<div>
<el-tree :data="data" ref="tree" @node-click="handleNodeClick"></el-tree>
<button @click="selectNode({key: '1'})">选中节点1</button>
</div>
</template>
<script>
export default {
methods: {
handleNodeClick(node) {
console.log(node);
},
selectNode(node) {
this.$refs.tree.setCurrentKey(node.key);
this.handleNodeClick(node);
}
},
data() {
return {
data: [{
label: '一级 1',
children: [{
label: '二级 1-1',
children: [{
label: '三级 1-1-1'
}]
}]
}]
};
}
};
</script>
```
3. 在父组件中监听子组件的事件,例如:
```
<template>
<div>
<my-tree @select-node="handleSelectNode"></my-tree>
</div>
</template>
<script>
import MyTree from './MyTree.vue';
export default {
components: {
MyTree
},
methods: {
handleSelectNode(node) {
console.log(node);
}
}
};
</script>
```
4. 在子组件中触发父组件的事件,例如:
```
methods: {
selectNode(node) {
this.$refs.tree.setCurrentKey(node.key);
this.$emit('select-node', node);
}
}
```
阅读全文