vue2.x el-tree 给每个节点添加层级标识

最新推荐文章于 2024-05-08 11:48:06 发布
最新推荐文章于 2024-05-08 11:48:06 发布
阅读量400 收藏 1
点赞数
文章标签： 前端 javascript vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_62015496/article/details/132058578
版权 
        __addTreeDataIndex (data, level = 0) {
            if (Array.isArray(data)) {
                data.forEach((node) => {
                    node.level = level;
                    if (node.children&& node.children.length > 0) {
                        this.__addTreeDataIndex(node.children, level + 1);
                    }
                });
            }
            return data;
        },

丢，捞仔
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
el-tree-select:基于el-select和el-tree改造的树形选择器（下拉框）组件
05-10
"el-tree-select:基于el-select和el-tree改造的树形选择器（下拉框）组件"是一个自定义的前端UI组件，它结合了Element UI库中的el-select和el-tree两个组件的功能，创建了一个适用于数据层级关系展示的选择器。...
tree第三层节点横向排列.vue
06-18
这个是...task-blog-2~blog~first_rank_v2~rank_blog_default-1-81562278.pc_v2_rank_blog_default&utm_term=element-ui+tree我这个文章的代码。下载了放在自己的vue项目中看结果吧
vuejs使用递归组件实现树形目录的方法
10-19
本篇文章主要介绍了vuejs使用递归组件实现树形目录的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
el-tree 设置节点文本空格开头的级别树|空格不显示问题|根据level层级转换成多层级对象，跨层级时特殊处理操作
blanknotes的博客
01-30 214
需要实现标题层级显示，如下图，也就是标题层级的el-tree展示。
《ElementUI 基础知识》el-tree 之“我的电脑”目录结构效果
最新发布
前端技术
05-08 714
el-tree 之“我的电脑”目录结构效果
element-ui树形控件el-tree详解
热门推荐
m0_63040701的博客
05-26 2万+
我这里不是直接用data来传递整个树的数据，而是用懒加载的方式，当点击一个节点的时候再进行树结构的添加。这里我利用element-ui开发一个vue的树形组件。修改vite.config.js配置按需加载。安装element-plus。
给树形结构数组添加层级标识
weixin_50338974的博客
07-18 281
递归，从最外层开始循环，当item有childrenList时，继续调用方法，并且给level加1。当没有childrenList或childrenList长度为0时停止。
el-tree没有复选框时，选中、currentNodeKey高亮、定位、刷新后保留展开状态功能的实现
qq_37485170的博客
06-13 4358
使用无选择框的el-tree时，当点击某行数据的时候会有背景色，但是当鼠标点击别处时，便失去焦点，背景色随之消失了。el-tree没有复选框时，选中、高亮、定位、刷新后保留展开状态功能的实 vue2+elementUI的el-tree的选中、高亮、定位功能，其中定位功能涉及到无论当前在那个菜单，删除某一项菜单后，刷新菜单会跳到全部:current-node-key="currentNodeKey" ----> 设置初始选中的值:highlight-current="true" ----> 设置高亮 必须写
Element-ui el-tree新增和删除节点后如何刷新tree的实例
10-14
在Element-ui中，`el-tree`是一个非常常用的组件，用于展示层级关系的数据。在实际开发过程中，我们常常需要动态地新增或删除树形结构中的节点，并确保这些操作后树能够正确地更新显示。本文将详细讲解如何在Element...
vue el-tree 默认展开第一个节点的实现代码
01-19
vue 的树形控件 el-tree 可以用来方便地实现树形控件，但是官方文档中，关于控件的默认展开只有默认展开全部或者默认全部关闭，如下所示： 对于指定节点的展开，需要指定其id，从而通过 default-expanded-keys 设置...
vue-tree-master.zip
11-28
"vue-tree-master.zip"这个压缩包可能包含了一个完整的示例项目，演示如何在Vue应用中集成和扩展el-tree组件，以实现增删改的功能。 Element UI 是一套为开发者、设计师和产品经理准备的基于Vue 2.0的组件库，它...
ElementUI el-tree 树形控件给节点添加图标
m0_49471668的博客
11-15 1183
<el-tree ref="tree" :data="data" check-on-click-node node-key="id" :default-expanded-keys="[2, 3]" :default-checked-keys="[5]" :props="defaultProps" @node-click="handleNodeClick" @check-change="han.
el-tree懒加载，每级渲染不同图标并且点击之后图标动态变化；实现局部层级刷新
string佳佳的博客
10-14 1231
效果图（每一层图标不同，并且打开和关闭状态的图标也不同） ------具体代码见最后------ 懒加载 渲染不同图标并且点击之后图标动态变化 实现局部层级刷新 注意：如果你想局部刷新第2级，应该在node.level=1的条件里面存储node和resolve变量，因为这个条件代表的意思是 “ 点击第1级 ， 渲染第2级 ”；同理，如果你想局部刷新第3级，那么就应该在node.level=...
el-tree技巧之只能选中最后一层级的子节点以及查找树结构第一个无子节点的叶节点
yinzisang的博客
12-30 6899
设置el-tree层级线，并且只能选中无子节点的叶节点
vue中向html插入节点标签（简单易懂）
weixin_46547740的博客
08-07 9551
正常vue中插入节点会报这个错： 原因：插入的不是节点，而是一个字符串，需要将这个字符串变为对象才能插入到HTML中 简单几步： 1、创建新节点 2、将新节点替换要插入的标签（innerHTML方法） 3、将节点插入到页面指定的标签中（appendChild（）方法） <template> <div class="home"> <h1 ref="home">首页（发现音乐） <h2>有数据</h2> </h1
递归合并数组并添加层级深度及标识
qq_42129925的博客
07-29 370
递归合并数组并添加层级深度及标识。
【vue3】实现el-tree组件，将不同层级的箭头修改成自定义图标的组件封装及调用
weixin_50450473的博客
05-10 4323
希望我的愚见能够帮助你哦~，若有不足之处，还望指出，你们有更好的解决方法，欢迎大家在评论区下方留言支持，大家一起相互学习参考呀~
Vue El-Tree 拖拽排序方法（通用）
wangmj518的专栏
10-05 634
/ 当拖拽类型不为inner,说明只是同级或者跨级排序，只需要寻找目标节点的父ID，获取其对象以及所有的子节点，并为子节点设置当前对象的ID为父ID即可。寻思着把新版本的el-tree也给加入排序功能，毕竟一碗水要端平（功能都是自己写的。// 拖拽事件 参数依次为：被拖拽节点对应的 Node、结束拖拽时最后进入的节点、被拖拽节点的放置位置（before、after、inner）、event。// 当拖拽类型为inner，说明拖拽节点成为了目标节点的子节点，只需要获取目标节点对象即可。
vue3项目element-plus，树组件el-tree修改下拉图标，增加引导线
Thurmanwang的博客
12-07 8204
vue3项目element-plus，树组件el-tree修改下拉图标，增加引导线 组件库的el-tree样式 由于基础版的样式不满足当前的ui设计，所以对el-tree做一下样式改造 参考的博客 并做了一部分优化，目前呈现样式如下： 代码具体实现 1、template模板引入el-tree组件，注意点需要设置:indent=“0”，不然每层树padding-left呈18px的倍数增加 <div class="mytree"> <el-tree :indent="
vue el-tree怎样给每个节点后面添加输入框并保存
05-01
Vue el-tree组件是一个支持层级树结构的组件，可以用于展示组织结构、文件目录等树型结构。给每个节点后面添加输入框的需求可能是为了让用户编辑节点的名称或其他信息。实现这个需求的步骤如下： 1. 在el-tree中的node默认插槽中添加一个输入框，如下： ``` <el-tree :data="data"> <template slot="node" slot-scope="{ node, data }"> <span>{{ node.label }}</span> <el-input v-model="node.name"></el-input> </template> </el-tree> ``` 2. 在data中添加需要修改的节点的name属性，然后在用户编辑输入框中的内容时实时更新该节点的name属性，如下： ``` data() { return { data: [ { label: '第一层', children: [ { label: '第二层', children: [ { label: '第三层', name: '节点名称' } ] } ] } ] } } ``` ``` <el-tree :data="data"> <template slot="node" slot-scope="{ node, data }"> <span>{{ node.label }}</span> <el-input v-model="node.name"></el-input> </template> </el-tree> ``` 3. 在用axios发送保存请求时，将修改的节点数据传给后端，让后端修改相应节点的数据，如下： ``` methods: { saveNodeData(node) { axios.post('/api/saveNodeData', { node }).then(res => { console.log(res.data) }).catch(error => { console.log(error.response.data) }) } } ``` 通过以上几个步骤，即可实现在el-tree中给每个节点后面添加输入框并保存数据的功能。注意，这只是实现的一个思路，具体实现还需要结合项目实际情况进行调整和优化。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值