要在
<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 函数中为
在
通过这种方式,你可以在