免费高清视频在线观看_阿里巴巴黄页网1688_seo文章范文_seoul是韩国哪个城市

需求：仅叶子节点可点击，非叶子节点只可展开收起

实现代码：

<template><el-tree-v2:data="data":props="props":node-key="nodeKey":default-expand-all="true"><template #default="{ node, data }"><div class="custom-tree-node"><!-- 只有叶子节点显示单选框 --><el-radiov-if="!node.children || node.children.length === 0":model-value="selectedNodeId":label="data.id"@click.stop="handleRadioClick(data.id)">{{ node.label }}</el-radio><!-- 非叶子节点只显示文本 --><span v-else>{{ node.label }}</span></div></template></el-tree-v2>
</template><script setup>
import { ref } from 'vue'const data = [// 你的树形数据{id: 1,label: '一级节点',children: [{id: 2,label: '二级节点',children: [{ id: 3, label: '三级节点1' },{ id: 4, label: '三级节点2' }]}]}
]const props = {label: 'label',children: 'children',
}const nodeKey = 'id'
const selectedNodeId = ref(null)const handleRadioClick = (id) => {selectedNodeId.value = idconsole.log('选中的节点ID:', id)
}
</script><style>
.custom-tree-node {flex: 1;display: flex;align-items: center;justify-content: space-between;padding-right: 8px;
}
</style>

实现效果：