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>

实现效果:

相关推荐
csgo打的菜又爱玩38 分钟前
Vue 基础(实战模板与命名指南)
前端·javascript·vue.js
ding_zhikai2 小时前
SD:在一个 Ubuntu 系统安装 stable diffusion Web UI
前端·ubuntu·stable diffusion
gerrgwg3 小时前
Vue-library-start,一个基于Vite的vue组件库开发模板
前端·javascript·vue.js
你的人类朋友4 小时前
【Node】单线程的Node.js为什么可以实现多线程?
前端·后端·node.js
iナナ5 小时前
Spring Web MVC入门
java·前端·网络·后端·spring·mvc
驱动探索者5 小时前
find 命令使用介绍
java·linux·运维·服务器·前端·学习·microsoft
开心不就得了5 小时前
自定义脚手架
前端·javascript
星晨雪海7 小时前
怎么格式化idea中的vue文件
前端·vue.js·intellij-idea
没事多睡觉6667 小时前
Vue 虚拟列表实现方案详解:三种方法的完整对比与实践
前端·javascript·vue.js