<el-tree ref="menuRef" node-key="id" :render-content="renderNode" show-checkbox :data="state.menuData" :render-after-expand="false" :props="{ children: 'children', label: 'name' }" @node-click="selectMenuItem" @check-change="handleCheckChange" />
const renderNode = (h: any, { node, data, store }: any) => {
const isLeaf = !data.children || data.children.length === 0;
if (isLeaf) {
return h(
'span',
{ class: 'custom-tree-node', style: 'width: 100%;cursor: pointer;height: 100%;' },
h(
'span',
{
class: 'node-label',
style: 'width: 100%;cursor: pointer;display:block;height: 100%;align-content: center;',
onClick: (event: any) => {
event.stopPropagation();
console.log('Leaf node label clicked', node.label);
selectMenuItem(data)
},
},
node.label
)
);
} else {
return h('span', { class: 'custom-tree-node' }, node.label);
}
};