vue中使用树控件el-tree如何实现添加加虚线展开树节点样式

最新推荐文章于 2024-08-09 07:00:47 发布
最新推荐文章于 2024-08-09 07:00:47 发布
阅读量1.3k 收藏 3
点赞数
文章标签： vue.js 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zms2000919/article/details/128132257
版权
本文介绍在Vue项目中，如何利用el-tree组件实现树节点展开时带有虚线边框的效果，通过调整vue代码和样式来达成目标。
摘要由CSDN通过智能技术生成

1.vue效果展示
在这里插入图片描述

  1. vue代码
      <el-tree
        :data="treeData"
        :props="defaultProps"
        @node-click="handleNodeClick"
        icon-class="el-icon-circle-plus-outline"
        class="tree-line"
	      :indent="0"
      ></el-tree>
  1. vue样式
.el-tree {
   
  width: 300px;
  padding-right
最低0.47元/天 解锁文章
龖龖龖
关注
Vue3+ElementPlus el-tree组件封装 实现虚线和自定义图标（拿来获取数据后即可使用）
朝花夕拾的博客
05-23 977
【代码】Vue3+ElementPlus el-tree组件封装 实现虚线和自定义图标（拿来获取数据后即可使用）
vue 为element树形组件el-tree添加虚线，指示线
吕大瓜的博客
08-11 1万+
需求需要实现一个带有指示线的树形组件，项目用的Vue，树形组件使用的是element的el-tree，所以想直接在element的组件上直接改样式实现。 先看最终实现的效果图： 思路 在控制台查看 el-tree 渲染后的HTML结构，找到相应的节点添加伪元素，利用伪元素的border属性加上定位实现虚线效果。 渲染后HTML结构如下，可发现树的结构是由一个类名为 el-tree-node 的div包裹着两个分别代表节点本身和子节点集的div 递归遍历生成的，类名为 el-tree-node 的div就是
ElementUI 中 Tree 树形控件 添加自定义样式 虚线及图标样式
DLM1031653077的博客
11-02 4817
修改前样式 修改后样式如图： <el-tree :data="data" :props="defaultProps" class="tree-line" icon-class="el-icon-plus" @node-click="handleNodeClick"></el-tree> <style lang="scss" type="text/css" scoped> .tree-default{ >>> .el-tree-node.
探索 Vue 的强大树形组件：vue-easy-tree
最新发布
gitblog_00069的博客
08-09 733
探索 Vue 的强大树形组件：vue-easy-tree vue-easy-treeA tree component based on vue2.x that supports a small amount of data or a large amount of data, multiple functions, and virtual scrolling.项目地址:https://gitco...
ElementUI el-tree 添加虚线实现方案
今夏的博客
03-06 1019
ElementUI el-tree 添加虚线实现方案
element-tree-line el-tree 添加结构线 添加虚线
在职可交流前端开发，包括：web端、uniapp等，欢迎指教。
07-31 2734
使用插件element-tree-line给element组件添加上虚线。
vue el-tree添加层级指示线
u011225228的博客
06-20 1万+
1.div中放个tree 注意设置：:indent="0"，否则节点会出现较大缩进 <div ref="treeDiv" class="tree-container"> <el-tree id="tree" class="tree" @node-click="treeNodeClick" :indent="0" ...
vue el-tree 默认展开第一个节点的实现代码
10-15
3. 默认展开节点功能：在树形控件el-tree中，默认展开全部或全部关闭是官方文档中提供的功能。但有时需要自定义默认展开特定的节点，比如本文中提到的默认展开树形结构的第一层第一个节点。 4. default-expanded-...
Element-ui树形控件el-tree自定义增删改和局部刷新及懒加载操作
11-19
需求： vue-cli项目树形控件：一级节点为本地节点，默认展开一级节点，增删改后局部刷新数据。 增加节点，点击确定后局部刷新，渲染新数据。 源码 element组件样式 <el-tree class="treeitems" :data="data...
element el-tree组件的动态加载、新增、更新节点的实现
10-15
Element UI 是一套基于 Vue 2.0 的桌面端组件库，其提供的 el-tree 组件用于实现树形控件功能。在实际开发中，我们经常会遇到动态加载、新增、更新树形控件节点的需求。本文将会详细解析如何使用 Element UI 的 el-...
Flex Tree增加虚线连接
04-07
Flex Tree增加虚线连接，绘制虚线连接样式
element tree
10-27
用vue+element 制作tree 功能主要有搜索增删改上下移动
Element-ui树形控件添加虚线
一只小木头的博客
11-22 3383
1.实现效果 2.实现代码 树形控件虚线的添加主要通过控制css来实现，并且在树形控件的缩进数只能为0，令class=“mytree” <div class="mytree"> <!--indent只能为0--> <el-tree :data="tree_data" :props="defaultProps" @node-click="handle
树形组件el-tree添加虚线，指示线
qq_45457134的博客
06-08 2574
为树形组件el-tree添加虚线，指⽰线
Element tree 样式
weixin_44381909的博客
02-18 881
/*设置鼠标悬浮经过的颜色*/ .el-tree-node:hover > .el-tree-node__content { background-color: #1C222B !important; } /*设置鼠标点击后的颜色*/ .el-tree-node:focus > .el-tree-node__content { ...
Element修改树结构样式--虚线树
daimaxiaodao的博客
01-26 980
修改el-tree为虚线树结构
elementui tree的自定义渲染（tree不同层级图标不同）
热门推荐
LIUHUA121的博客
04-24 1万+
一 说明：  功能开发，要求展示的数据树列表中，根节点为文件夹样式，子节点为文件样式，所以稍稍学习了elementui中的tree的渲染二 效果展示：最终实现功能如下三 代码展示：在做该功能点时，耽误一天之久，因本人很少涉及前端，所以对前端知识较为生疏，所以并不能讲的很透彻，作此笔记以备后用。公司前端在elementUI的基础上略加封装，使得数据父子关系，不需要自己构造，所以无法讲解，（我也不知道...
自定义《element-UI》el-tree 的样式 、亲测管用
技术前端，忠于热爱 @0.活在风浪里
03-15 1万+
自定义《element-UI》el-tree 的样式 、亲测管用
Vue-CLI项目中El-tree自定义增删改操作与局部刷新懒加载详解
在Vue CLI项目中，本文将深入探讨如何使用Element UI中的el-tree树形控件实现自定义功能，包括添加、删除、修改节点以及局部刷新和懒加载操作。首先，我们关注的是如何设置一级节点为本地节点，并默认展开，以便于...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值