vue3+element plus +el-tree-v2实现树形单选
<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-radio
v-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 = id
console.log('选中的节点ID:', id)
}
</script>
<style>
.custom-tree-node {
flex: 1;
display: flex;
align-items: center;
justify-content: space-between;
padding-right: 8px;
}
</style>