要在
<template>
<div>
<el-tree
:data="treeData"
:props="treeProps"
:render-content="renderNodeContent"
></el-tree>
</div>
</template>
<script>
export default {
data() {
return {
treeData: [
{
label: '节点1',
children: [
{ label: '子节点1' },
{ label: '子节点2' },
],
},
{
label: '节点2',
children: [
{ label: '子节点3' },
{ label: '子节点4' },
],
},
],
treeProps: {
children: 'children',
label: 'label',
},
};
},
methods: {
renderNodeContent(h, { node, data, store }) {
return (
<span>
<span
onClick={() => this.handleNodeClick(data)}
style={{ cursor: 'pointer' }}
>
{data.label}
</span>
{data.children && data.children.length > 0 && (
<span style="color: gray; margin-left: 5px">
({data.children.length})
</span>
)}
</span>
);
},
handleNodeClick(data) {
console.log('点击了节点:', data);
// 在这里执行你的逻辑
},
},
};
</script>
在上述示例中,我们在 Render 函数中为
在
通过这种方式,你可以在