基于elementui带连接线的树形控件的样式修改

最新推荐文章于 2024-02-02 14:50:44 发布
最新推荐文章于 2024-02-02 14:50:44 发布
阅读量2.9k 收藏 13
点赞数 3
文章标签： elementui 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/min4233/article/details/126136135
版权

原本样式：

需求样式：

技术难点：

    1.tree树形控件修改小三角图标;

    2.每级标题前面增加icon图标；

    3.添加线。

解决方法：

    1.tree树形控件修改小三角图标

     直接在样式中修改就可以了

/deep/  .el-tree-node__expand-icon.expanded {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
}
/deep/  .el-tree-node__expand-icon.expanded {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
}
/* //有子节点 且未展开 */
/deep/ .el-icon-caret-right:before {
    content: url('/static/image/operationWell/目录树_默认.png');
    display: block;
    width: 20px;
    height: 20px;
    font-size: 16px;
    background-size: 16px;
}
/* //有子节点 且已展开 */
/deep/ .el-tree-node__expand-icon.expanded.el-icon-caret-right:before {
    content: url('/static/image/operationWell/目录树_展开.png');
    display: block;
    width: 20px;
    height: 20px;
    font-size: 16px;
    background-size: 16px;
}
/* //没有子节点 */
/deep/ .el-tree-node__expand-icon.is-leaf::before {
    background: #fff;
    content: '';
    display: block;
    width: 0px;
    height: 0px;
    font-size: 16px;
    background-size: 16px;
}
/* //高亮字体颜色 */
/deep/ .el-tree-node.is-current > .el-tree-node__content {
    color: #409eff !important;
}

2.每级标题前面增加icon图标

找了很多的资料，最后找到一个比较简单的方法，但是有一个bug我也没有解决就是叶子结点的图标无法变成无实体icon图标，只能改成那种实体icon图标。

<el-tree :data="data" :props="defaultProps" @node-click="handleNodeClick" class="tree-line" default-expand-all :expand-on-click-node="false" :indent="0">
    <span slot-scope="{ node, data }" class="slot-t-node">
        <template>
            <i :class="{
                'el-icon-folder': !node.expanded,       // 节点收缩时的图标
                'el-icon-folder-opened': node.expanded, // 节点展开时的图标
                'el-icon-s-management': data.type === 2   // data.type是后端配合提供的识别字段，最后一级
            }" 
            style="color:#606266"
            />
            <span>{{ node.label }}</span>
        </template>
    </span>
</el-tree>

children: [{
    id: 4,
    label: '二级 1-1',
    children: [{
        id: 9,
        label: '三级 1-1-1',
        type: 2 //叶子结点添加这个树形可更改叶子结点图标
    }, {
        id: 10,
        label: '三级 1-1-2',
        type: 2
    }]
}]

3.添加线。

这个最难弄，知道现在还有一个莫名其妙的横线我还没有解决。

element的官网由提供一个属性 indent ，该属性可以控制相邻级节点间的水平缩进，单位为像素。我们可以将该属性设置为0，然后我们在css中为所有 el-tree-node 设置 padding-left ，就可以达到缩进的效果了！

由于每一层 el-tree-node 都被上一层的 el-tree-node 包裹着，上一层的padding会影响到下层的div位置，所以每一层的节点就不会撑满整个树形大盒子了，现在就可以直接根据 el-tree-node 定位伪元素了。

因此先在el-tree中加一个 :indent="0"，这个时候每个结点的前面的间距就会消失，于是在css中设置间距，

/deep/ .el-tree-node{
    position: relative;
    padding-left: 16px; // 缩进量
}
/deep/ .el-tree-node__children {
    padding-left: 16px; // 缩进量
}

 最后css中设置线条：

//当前层最后一个节点的竖线高度固定
/deep/ .el-tree-node :last-child:before {
    height: 40px;
}
//去掉最顶层的虚线，放最下面样式才不会被上面的覆盖了
/deep/ .el-tree > .el-tree-node:before {
    border-left: none;
}
/deep/ .el-tree > .el-tree-node:after {
    border-top: none;
}
//叶子结点不设置
/deep/ .el-tree-node__children .el-tree-node:before {
    content: "";
    left: -4px;
    position: absolute;
    right: auto;
    border-width: 1px;
}
/deep/ .el-tree-node:after {
    content: "";
    left: -4px;
    position: absolute;
    right: auto;
    border-width: 1px;
}
/deep/ .el-tree-node__expand-icon.is-leaf {
    display: none;
}
//竖线
/deep/ .el-tree-node:before {
    border-left: 1px dashed #dddddd;
    bottom: 0px;
    height: 100%;
    top: -26px;
    width: 1px;
}
//横线
/deep/ .el-tree-node:after {
    border-top: 1px dashed #dddddd;
    height: 20px;
    top: 20px;
    width: 16px;
}

完整代码：

<template>
    <el-tree :data="data" :props="defaultProps" @node-click="handleNodeClick" class="tree-line" default-expand-all :expand-on-click-node="false" :indent="0">
        <span slot-scope="{ node, data }" class="slot-t-node">
            <template>
                <i :class="{
                    'el-icon-folder': !node.expanded,       // 节点收缩时的图标
                    'el-icon-folder-opened': node.expanded, // 节点展开时的图标
                    'el-icon-s-management': data.type === 2   // data.type是后端配合提供的识别字段，最后一级
                }" 
                style="color:#606266"
                />
                <span>{{ node.label }}</span>
            </template>
        </span>
    </el-tree>
</template>
<script>
    export default {
        components: {
        },
        data() {
          return {
            data: [{
                id: 1,
                label: '一级 1',
                children: [{
                    id: 4,
                    label: '二级 1-1',
                    children: [{
                        id: 9,
                        label: '三级 1-1-1',
                        type: 2
                    }, {
                        id: 10,
                        label: '三级 1-1-2',
                        type: 2
                    }]
                }]
            }, {
                id: 2,
                label: '一级 2',
                children: [{
                    id: 5,
                    label: '二级 2-1',
                    type: 2
                }, {
                    id: 6,
                    label: '二级 2-2',
                    type: 2
                }]
            }, {
                id: 3,
                label: '一级 3',
                children: [{
                    id: 7,
                    label: '二级 3-1',
                    type: 2
                }, {
                    id: 8,
                    label: '二级 3-2',
                    type: 2
                }]
            }],
            defaultProps: {
              children: 'children',
              label: 'label'
            }
          };
        },
    methods: {
        handleNodeClick(data) {
        }
    }
  }
</script>
<style lang='scss' scoped>
.tree{
    padding-left: 8px;
    padding-top: 16px;
    .tree-line{
        /deep/ .el-tree-node{
            position: relative;
            padding-left: 16px; // 缩进量
        }
        /deep/ .el-tree-node__children {
            padding-left: 16px; // 缩进量
        }
        //这是竖线
        /deep/ .el-tree-node :last-child:before {
            height: 40px;
        }
        /deep/ .el-tree > .el-tree-node:before {
        border-left: none;
        border-top: none;
        }
        /deep/ .el-tree > .el-tree-node:after {
        border-top: none;
        border-left: none;
        }
        /deep/ .el-tree-node__children .el-tree-node:before {
        content: "";
        left: -4px;
        position: absolute;
        right: auto;
        border-width: 1px;
        }
        /deep/ .el-tree-node:after {
        content: "";
        left: -4px;
        position: absolute;
        right: auto;
        border-width: 1px;
        }
        /deep/ .el-tree-node__expand-icon.is-leaf {
        display: none;
        }
        /deep/ .el-tree-node:before {
        border-left: 1px dashed #dddddd;
        bottom: 0px;
        height: 100%;
        top: -26px;
        width: 1px;
        }
        /deep/ .el-tree-node:after {
        border-top: 1px dashed #dddddd;
        height: 20px;
        top: 20px;
        width: 16px;
        }
        /deep/ .el-tree-node__content{
            height: 40px !important;
            width: 298px;
        }
        /deep/ .el-tree .el-tree-node__expand-icon.expanded {
            -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
        }
        /deep/ .el-tree .el-tree-node__expand-icon.expanded {
            -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
        }
        /* //有子节点 且未展开 */
        /deep/ .el-icon-caret-right:before {
            content: url('/static/image/operationWell/目录树_默认.png');//树形控件点击图标更改为图片，需要自己设置
            display: block;
            width: 20px;
            height: 20px;
            font-size: 16px;
            background-size: 16px;
        }
        /* //有子节点 且已展开 */
        /deep/ .el-tree-node__expand-icon.expanded.el-icon-caret-right:before {
            content: url('/static/image/operationWell/目录树_展开.png');//树形控件点击图标更改为图片，需要自己设置
            display: block;
            width: 20px;
            height: 20px;
            font-size: 16px;
            background-size: 16px;
        }
        /* //没有子节点 */
        /deep/ .el-tree-node__expand-icon.is-leaf::before {
            background: #fff;
            content: '';
            display: block;
            width: 0px;
            height: 0px;
            font-size: 16px;
            background-size: 16px;
        }
        /* //高亮字体颜色 */
        /deep/ .el-tree-node.is-current > .el-tree-node__content {
            color: #409eff !important;
        }
    }
  }
</style>

叶予予
关注
  • 3
    点赞
  • 踩
  • 13
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
Vue+Element UI 整合下拉目录树（popover+ tree+input）
越努力，越幸运！
05-31 1787
一、演示效果 二、完整代码 <template> <el-popover placement="bottom-start" title="" width="300" v-model="showTree" popper-class="el-popover-tree" trigger="click" content=""> <el-.
el-tree设置每个节点的连接线 修改展开图标为加减号（附效果图）
最新发布
sh11223312的博客
06-07 634
【代码】el-tree设置每个节点的连接线 修改展开图标为加减号（附效果图）
el-tree创建结构线，并且可拖动
12-04
el-tree创建结构线，并且可拖动
element-tree-line el-tree 添加结构线 添加虚线
在职可交流前端开发，包括：web端、uniapp等，欢迎指教。
07-31 2503
使用插件element-tree-line给element组件添加上虚线。
element tree组件连接线以及懒加载
分享互联网的有趣知识~
06-12 1422
element-tree组件连接线以及懒加载和懒加载全部展开
优雅地给element-ui和element-plus的el-tree控件添加结构线
cn_zgt_boss的博客
10-30 8268
优雅地给element-ui和element-plus的el-tree控件添加结构线 看 element-ui issues 有不少人提到 el-tree 结构线的需求，官方依然没有支持，我也有这个需求，有搜索到一些直接覆盖 el-tree 的 css 做法，在节点缩进、点击行效果、拖拽等方面没有很贴合的效果，并不是我想要的 于是我写了element-tree-line这个组件，作为el-tree子组件的方式，无侵入性，可插拔，很优雅的添加结构线。 原理是利用el-tree的slot，添加对应节点的n个s
vue3.2 element-plus el-tree添加结构线/引导线
nlhhln的博客
06-26 1459
使用了一个第三方插件，地址https://github.com/GitOfZGT/element-tree-line用法简单，灵活，通过slot实现，侵入性低，关键代码如下。
elementUI Tree 树形控件的官方使用文档
10-17
ElementUI Tree 树形控件是前端开发中常用的一种组件，它用于展示具有层次结构的数据，通常被用来表示目录、组织架构或者有嵌套关系的信息。这个组件允许用户展开或折叠节点，以便更好地管理和查看数据。在本文中，...
vue elementUI tree树形控件获取父节点ID的实例
10-18
今天小编就为大家分享一篇vue elementUI tree树形控件获取父节点ID的实例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
labview树形控件的使用
01-14
你可以通过“数据”属性页将数据连接到树形控件，LabVIEW会自动根据数据结构生成相应的树形布局。 3. **编程操作** 在程序框图中，你可以使用“树形控件函数”库来控制树形控件的行为。比如，`Add Node`函数用于向...
LabVIEW中树形控件的基本操作
02-02
使用“编辑数据绑定”选项，将控件与VI的变量进行连接，这样当数据改变时，树形控件会自动更新，反之亦然。 3. **事件处理**：树形控件支持多种事件，如节点点击、节点展开/折叠等。在程序框图中添加相应的事件结构...
elementui tree 支持虚拟滚动和treeLine （上）
嗝~
06-09 2615
最终在查阅相关资料时，发现github有一个大佬使用vue-virtual-scroller自己写了一个elementui tree的扩展组件。同时这款组件还能完美的继承elementui tree上的属性和方法，算是过渡最为平滑的组件了。需求变更：虽然虚拟滚动实现了，但是在演示的时候领导觉得，还是加个treeLine 更好看。所谓的treeLine 就是tree展开时，侧边那一条条带有结构性质的边线。确认这个ui就是我们要的，下一步就是发布到npm了。的源码上进行调整，毕竟业务代码已经写了那么多了。
elementUI树形组件添加连接线（附效果图）
会点php的前端小渣渣
03-17 6048
<div class="tree-container"> <el-tree :data="treeData2" :highlight-current="true" node-key="lc_id" default-expand-all draggable :allow-drop="allowDrop" @node-drag-end="handleDragEnd" .
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就是
Element修改树结构样式--虚线树
daimaxiaodao的博客
01-26 826
修改el-tree为虚线树结构
给tree组件添加连接线
yixiaojing527的博客
11-22 2031
1.页面渲染 <template> <div class='tree-line'> <el-tree :data="data" :indent='0' :props="defaultProps" @node-click="handleNodeClick"> </el-tree> </div> </template> <-- 注意： ：indent='0'这一项设置一下，..
自定义《element-UI》el-tree 的样式 、亲测管用
技术前端，忠于热爱 @0.活在风浪里
03-15 1万+
自定义《element-UI》el-tree 的样式 、亲测管用
el-tree树结构添加指引线
weixin_59423799的博客
02-02 861
用element的el-tree树时，展开收缩的数据当数据量大时就会显示的杂乱，不容易查看，所以希望是能像zTree一样支持有指引线。
在layui的表格中 实现一个树形下拉选择框
03-22
可以使用 layui 的 tree 模块和 form 模块来实现一个树形下拉选择框。具体实现步骤如下： 1. 在 HTML 中定义一个表格，并在其中添加一个下拉选择框的列，如下所示： ``` <table class="layui-table"> <thead> <tr> <th>姓名</th> <th>性别</th> <th>城市</th> <th>爱好</th> <th>操作</th> </tr> </thead> <tbody> <tr> <td>张三</td> <td>男</td> <td> <div class="layui-input-inline"> <select name="city" lay-filter="tree"> <option value="">请选择城市</option> <option value="1">北京</option> <option value="2">上海</option> <option value="3">广州</option> <option value="4">深圳</option> </select> </div> </td> <td>篮球</td> <td> <button class="layui-btn layui-btn-xs">编辑</button> <button class="layui-btn layui-btn-danger layui-btn-xs">删除</button> </td> </tr> </tbody> </table> ``` 2. 在 JavaScript 中初始化 layui 的 tree 模块和 form 模块，并为下拉选择框添加一个事件监听器，如下所示： ``` layui.use(['tree', 'form'], function(){ var tree = layui.tree, form = layui.form; // 初始化树形下拉选择框 tree({ elem: '#tree', nodes: [ { name: '北京', id: 1, children: [ { name: '朝阳区', id: 11 }, { name: '海淀区', id: 12 }, { name: '东城区', id: 13 } ] }, { name: '上海', id: 2, children: [ { name: '浦东新区', id: 21 }, { name: '徐汇区', id: 22 }, { name: '黄浦区', id: 23 } ] }, { name: '广州', id: 3, children: [ { name: '天河区', id: 31 }, { name: '越秀区', id: 32 }, { name: '海珠区', id: 33 } ] }, { name: '深圳', id: 4, children: [ { name: '福田区', id: 41 }, { name: '南山区', id: 42 }, { name: '罗湖区', id: 43 } ] } ] }); // 监听下拉选择框的 change 事件 form.on('select(tree)', function(data){ console.log(data.value); // 输出选中的值 }); }); ``` 3. 在 CSS 中定义一些样式，使树形下拉选择框的样式更美观，如下所示： ``` .layui-tree .layui-tree-txt { padding-left: 20px; } .layui-tree .layui-tree-icon { left: 0; } .layui-form-select .layui-edge { right: 10px; } .layui-form-select dl { max-height: 200px; overflow-y: auto; } ``` 这样就可以实现一个树形下拉选择框了。
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值