el-tree的懒加载数据除去没有用到的三角形图标或最后一级三角形）

最新推荐文章于 2025-02-20 15:21:39 发布
最新推荐文章于 2025-02-20 15:21:39 发布
阅读量5k 收藏 8
点赞数 2
分类专栏： 笔记
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/gebieren/article/details/108977681
版权
本文介绍了如何在el-tree的懒加载场景中，通过利用el-tree的props属性中的isLeaf来隐藏不需要的三角形图标，特别是在处理最后一级节点时。通过在ts代码中定义props，并在样式中进行设置，可以有效控制节点的显示效果。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

由于点击节点才去渲染子层（下一层）的数据，通过操作dom的方法去获取元素并改变其样式（display:none）并不容易，而且容易获取失败！
通过多次尝试，利用el-tree固有的属性props中的isLeaf可以直接指定你需要隐藏某个节点的三角形！
html结构如下：

<el-tree :props="props" lazy  :date="data" :load="loadNode"></el-tree>
最低0.47元/天 解锁文章
el-tree 修改默认左侧三角图标，并使没有子级的那一项不展示图标
weixin_41346436的博客
04-10 3209
【代码】el-tree 修改默认左侧三角图标，并使没有子级的那一项不展示图标。
elememt el-tree使用（样式修改+设置为单选，不含父节点）
qq_42420978的博客
01-21 2169
elememt el-tree使用（样式修改+设置为单选，不含父节点） 最近在使用element做练习，就单纯的向对使用的组件和功能做一下下记录—v— 直接在elememt官网找自己想要使用的组件就好 html <el-tree ref="tree" :data="typeList" ---展示数据 :props="defaultProps"---配置选项 :show-checkbox="true" --
vue中使用el-tree的懒加载的时候祛除不必要的三角形，解决HTMLCollection为空
成在坚持，贵在坚持
08-04 3755
需要将el-tree的懒加载的没有用到的三角形祛除 需要祛除的部分，如下图中的第三级的文件，这是最后一层，所以左边的三角形加载按钮没有意义，需要祛除 实现思路：如下图，因为三角形按钮是element-ui渲染出来的，无法通过在代码里设置样式，需要使用js操作dom来隐藏三角形。下面的元素是可以获取的元素，上面的是element-ui渲染出来的元素。需要通过已知的元素来查找到三角形的元素如何隐藏。 // 根据图标的类名获取到当前的元素 const childNodeArr = document.get
解决element-ui的el-select使用filterable属性时，下拉框展开后，点击箭头图标收不回去问题
最新发布
Hi_MrXiao的博客
02-20 382
问题：当el-select下拉组件设置filterable属性时，下拉框展开后，再点击箭头图标下拉框收不回去了。在el-select标签上新增事件 @visible-change=“selectVisibleChange” @focus="selectFocus"的处理。
vue+elment el-tree懒加载自定义叶子节点，三角样式最后一层不显示css
u012487439的博客
06-15 1607
element-ui + vue el-tree 懒加载 三角不显示
修改element-ui中Tree树形结构前面的三角形图标
可可爱爱的你吖的博客
08-25 2961
修改element-ui中Tree树形结构前面的三角形图标
【vue-treeselect+el-table】数据量大的时候懒加载，数据回显，输入框绑值，末级节点不要前面的箭头等问题详解
花椒和蕊的博客
07-11 3988
vue-treeselect官网，戳我 最近做了个功能，el-table可编辑表格，有一列是treeselect下拉树，接口数据900多kb，请求花了400毫秒左右，按道理说数据不算很大，但是渲染很慢，一刷新或者刚进页面，有1.89秒的卡顿，并且点击下拉树或者同行其他的el-select下拉，卡顿非常明显。这个列表需要填写上百行数据，不做优化肯定不行的。优化的思路就是懒加载，思路是： 调两次树接口，第一次什么都不传或者传0，看后端怎么要求，最重要的是拿到的是根节点。如下： 子节点children都为空，只
ElementUI框架中el-tree左侧小三角修改自定义图标
Web_chicken的博客
11-23 6015
ElementUI框架中el-tree左侧小三角修改自定义图标 一、先看下效果图 二、css样式 注意，样式放在scope里不生效，如果必要请加上/deep/样式穿透 // 禁止旋转 .el-tree .el-tree-node__expand-icon.expanded{ -webkit-transform: rotate(0deg); transform: rotate(0deg); } //有子节点 且未展开 .el-tree .el-icon-caret-right:before{
修改iview-ui tree树结构默认的小三角形源码
06-06
修改iview-ui tree树结构前面得小三角。可以使用ui库自带的icon图标，也可以自己根据项目 需求添加背景图片。 并且包括点击当前的父级节点文字，展开/隐藏 子级菜单，同时背景高亮显示 下载后，直接npm install 就...
el-tree异步加载子节点
09-12
在el-tree中，可以通过配置lazy属性来实现异步加载子节点数据。具体可以通过指定row中的hasChildren字段来指定哪些行是包含子节点。同时，可以通过tree-props配置children字段来指定子节点数据的属性名称。 实现...
Vue行政区划树图懒加载实现方法--（每次点击只打开下一层级）
weixin_55053824的博客
07-23 1567
1、前提条件：由于权限原因，每个用户只能看到当前自己的行政区划和下辖区划，因此需要后端提供如下功能接口，当传入值为空时，仅返回当前用户信息中的行政区划信息，之后点击树图中的下拉按钮仅返还该区划下一层级的内容。 直接上代码，树组件tree.vue内容 <template> <div class="side-menu"> <!--搜索框--> <el-input placeholder="输入关键字进行过滤" v-model
el-tree 去除默认的图标
Charliecheu的博客
03-31 1581
el-tree 去除默认的图标 通过icon-class可以设定左侧的小图标，如果不想要的话，icon-class=“none”，就可以去掉，none不是必须的，任何一个不是icon的图标名都可以，因为这样它匹配不到icon，就会不显示，用空字符串不行，会使用默认样式 ...
el-tree(element-ui)逐级懒加载，及局部刷新
jaqi.csdn
11-04 1904
逐级懒加载 html <el-tree :data="rootDate" :props="props" ref="tagtree" :load="loadNode" lazy @node-click="handleNodeClick" > </el-tree> data 根目录数据 props 绑定渲染规则 ref注册DOM load绑定懒加载时间 lazy懒加载效果 node-click节点点击事件 Vue.js >>> data data()
2022-06-15 el-tree部分节点懒加载
一只白猫罢了
06-15 925
不居家办公了，有点不习惯。现有一棵选择人员树 （懒加载），希望通过搜索部门，快速定位到想选的人员。 后台返给我的搜索结果是一棵普通树 （非懒加载），且结果可能多个（部门之间可能重名） 用户点击搜索结果树的末级节点，可以通过之前的懒加载接口进行查找下级节点 （此节点及以下懒加载） 搜索部门名称：DEMO检查，后台返回DEMO检查一 和DEMO检查二，点击展开懒加载出节点 机关el树是无法实现部分节点懒加载的。当搜索时，备份返回的数据，后续渲染展开子节点时，需要前端模拟懒加载，递归遍历找到相应节点数据放入树里（
element中el-tree动态（懒）加载节点与自定义过滤
Ethan's Blog
04-21 5618
项目（vue+TS）背景，总共有三级菜单，二级菜单数据是已有的，三级菜单数据是根据二级菜单动态拉取渲染的，且当第二次请求时，不在重新请求，只是把上一次请求的数据拿来渲染就行了，减少了请求。 参考 element-UI-tree 按需引入 element.js import { Scrollbar, } from "element-ui"; Vue.use(Scrollbar); ...
el-tree树组件的懒加载load写法
fzlw000的博客
07-15 1005
懒加载前端代码html部分</</</</js部分。
公司树分别通过前端和后端实现，element的el-tree,懒加载，及时加载
Radish
11-06 2168
公司树 一、基础准备: 1.1 数据库建表要有层级关系：     如上图所示，通过id和pid建立层级关系。其中pid为父级公司的id，而leaf是为表明该公司是否存在子公司，当leaf为1(true)时表明在公司树结构中为叶子，因此下方不包含子公司。      数据中的层级结构如下： 二、懒加载: 2.1 代码实现： <template> <div> <div> <
在Vue3+ElementPlus项目中使用具有懒加载的el-tree树形控件
都随它大小便吧
11-01 3835
有时遇到一些需求就是在使用树形控件时，服务端并没有一次性返回所有数据，而是返回首层节点列表。然后点击展开首层节点中的某个节点，再去请求该节点的子节点列表，那么就得用上懒加载的机制了。在此以ElementPlus的树形控件为例，实现一个具有懒加载的树形控件的示例页面。
【Element】el-tree 树形控件
热门推荐
joanmelon的博客
12-10 1万+
☀️大家好，我是宾果的救星~希望记录的学习和收获能够帮助大家在开发过程中得到思路并且解决难题。希望大家多多点赞~爱你们哟~
el-tree懒加载数据回显
08-25
在el-tree懒加载模式下，想要实现数据回显，需要注意几个方面。首先，需要在组件刚渲染的时候，就构造想要的树节点，可以通过设置default-expanded-keys属性来表示默认展开节点的key数组。这样el-tree-select会按照...
评论 5
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值