vue3+element plus +el-tree-v2实现树形单选

需求:仅叶子节点可点击,非叶子节点只可展开收起

实现代码:

html 复制代码
<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>

实现效果:

相关推荐
不如摸鱼去17 分钟前
从 Wot UI 出发谈 VSCode 插件的自动化发布
前端·vscode·开源·自动化
im_AMBER29 分钟前
JavaScript 03 【基础语法学习】
javascript·笔记·学习
IT_陈寒1 小时前
Python开发者必看:这5个鲜为人知的Pandas技巧让你的数据处理效率提升50%
前端·人工智能·后端
豆苗学前端1 小时前
写给女朋友的第一封信,测试方法概论
前端·后端·设计模式
半桶水专家1 小时前
Vue 3 插槽(Slot)详解
前端·javascript·vue.js
袁煦丞1 小时前
本地AI绘画神器+全局访问——Stable Diffusion WebUI 成功突破:cpolar内网穿透实验室第462个成功挑战
前端·程序员·远程工作
一枚前端小能手1 小时前
🏗️ JavaScript类深度解析 - 从构造函数到现代特性的完整指南
前端·javascript
袁煦丞2 小时前
家用NAS+云盘自由NanoPi R4S+iStoreOS:cpolar内网穿透实验室第460个成功挑战
前端·程序员·远程工作
浏览器API调用工程师_Taylor2 小时前
日报自动化实战:告别手动复制粘贴
前端·javascript·node.js
晴殇i2 小时前
JavaScript还能这样写?!ES2025新语法让代码优雅到极致
前端·javascript·程序员