写一段 打开带有eltree 的组件,默认调用el-tree的点击事件
时间: 2023-10-19 16:14:25 浏览: 81
fuelux.tree 自定义属性控件-自定义图标+动态加载数据+添加点击事件
假设你使用的是 Vue 框架,代码如下:
```html
<template>
<el-tree :data="treeData" @node-click="handleNodeClick"></el-tree>
</template>
<script>
export default {
data() {
return {
treeData: [
{
label: '一级 1',
children: [
{
label: '二级 1-1',
children: [
{
label: '三级 1-1-1'
},
{
label: '三级 1-1-2'
}
]
},
{
label: '二级 1-2',
children: [
{
label: '三级 1-2-1'
},
{
label: '三级 1-2-2'
}
]
}
]
}
]
}
},
methods: {
handleNodeClick(data) {
console.log(data)
// 在这里写入默认调用的代码逻辑
}
}
}
</script>
```
在上面的代码中,我们使用了 `el-tree` 组件,并将 `treeData` 作为数据源传入,同时监听了 `node-click` 事件,并在事件处理函数 `handleNodeClick` 中写入默认调用的代码逻辑。当用户在页面中点击树形节点时,`handleNodeClick` 函数将会被触发,并打印出当前点击的节点数据对象 `data`。你可以在这里根据你的需求,编写默认调用的代码逻辑。
阅读全文