当前位置: 首页 > article >正文

在Vue2中,el-tree组件的页面节点前三角符号仅在有下级节点时显示

在 Vue2 中使用 Element UI 的 el-tree 组件时,默认情况下,即使没有子节点的节点也会显示一个可折叠的三角符号。如果你想要隐藏没有子节点的三角符号,可以通过自定义节点的内容来实现。
下面是一个简单的示例,展示如何使用 el-tree 组件,并通过 render-content 属性来自定义节点的内容,从而控制三角符号的显示:

<template>
  <el-tree
    :data="treeData"
    :props="defaultProps"
    show-checkbox
    node-key="id"
    default-expand-all
    :render-content="renderContent"
  >
  </el-tree>
</template>
<script>
export default {
  data() {
    return {
      treeData: [
        {
          id: 1,
          label: '节点1',
          children: [
            {
              id: 4,
              label: '子节点1-1'
            }
          ]
        },
        {
          id: 2,
          label: '节点2'
        },
        {
          id: 3,
          label: '节点3',
          children: [
            {
              id: 5,
              label: '子节点3-1'
            },
            {
              id: 6,
              label: '子节点3-2'
            }
          ]
        }
      ],
      defaultProps: {
        children: 'children',
        label: 'label'
      }
    };
  },
  methods: {
    renderContent(h, { node, data, store }) {
      if (node.isLeaf) {
        // 如果是叶子节点,不显示三角符号
        return h('span', {}, node.label);
      } else {
        // 如果不是叶子节点,正常显示
        return h('span', {}, [
          h('i', { class: 'el-icon-caret-right' }),
          h('span', {}, node.label)
        ]);
      }
    }
  }
};
</script>

在这个示例中,renderContent 方法是一个函数,它接受两个参数:h(createElement 函数)和节点相关的对象。我们检查节点是否是叶子节点(node.isLeaf),如果是,则直接返回一个包含节点标签的 span 元素;如果不是,则返回一个包含三角符号和节点标签的 span 元素。
这样,没有子节点的节点就不会显示三角符号了。注意,这里使用的是 Element UI 的图标类 el-icon-caret-right 来表示三角符号,如果你不希望显示这个图标,可以简单地省略它。


http://www.kler.cn/a/449751.html

相关文章:

  • Windows 11 安装 Dify 完整指南 非docker环境
  • k8s dashboard可视化操作界面的安装
  • GPU环境配置
  • JavaScript中函数调用时的参数传递
  • 重温设计模式--中介者模式
  • 3.4 stm32系列:定时器(PWM、定时中断)
  • LeetCode 54. 螺旋矩阵 (C++实现)
  • Deformable DETR:Deformable Transformers for End-to-End Object Detection论文学习
  • 【从零开始入门unity游戏开发之——C#篇26】C#面向对象动态多态——接口(Interface)、接口里氏替换原则、密封方法(`sealed` )
  • Springboot项目本地连接并操作MySQL数据库
  • 数据结构概念介绍
  • Javascript数据结构——二叉树篇
  • 微信小程序xr-frame透明视频实现
  • 服务器证书原理
  • WebContainerapi 基础(Web IDE 技术探索 一)
  • DevOps工程技术价值流:制品库Nexus与Harbor的实战探索
  • 重温设计模式--适配器模式
  • Spring - 12 ( 7000 字 Spring 入门级教程 )
  • Echarts之yAxis属性超超超级详情版学习
  • 灵当CRM getMyAmbassador SQL注入漏洞复现
  • Unity3D VFX事件系统详解
  • 在 Docker 中部署 Jenkins,并完成项目的构建和发布
  • 【C#】List求并集、交集、差集
  • Postman接口测试工具使用详解
  • 中国信通院致信感谢易保全:肯定贡献能力,期许未来合作
  • 【QSS样式表 - ⑥】:QPushButton控件样式