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

最新推荐文章于 2024-06-07 17:44:16 发布
最新推荐文章于 2024-06-07 17:44:16 发布
阅读量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
    评论
给tree组件添加连接线
yixiaojing527的博客
11-22 2019
1.页面渲染 <template> <div class='tree-line'> <el-tree :data="data" :indent='0' :props="defaultProps" @node-click="handleNodeClick"> </el-tree> </div> </template> <-- 注意： ：indent='0'这一项设置一下，..
Vue+Element UI 整合下拉目录树（popover+ tree+input）
越努力，越幸运！
05-31 1786
一、演示效果 二、完整代码 <template> <el-popover placement="bottom-start" title="" width="300" v-model="showTree" popper-class="el-popover-tree" trigger="click" content=""> <el-.
element-tree-line el-tree 添加结构线 添加虚线
在职可交流前端开发，包括：web端、uniapp等，欢迎指教。
07-31 2499
使用插件element-tree-line给element组件添加上虚线。
el-tree设置每个节点的连接线 修改展开图标为加减号（附效果图）
最新发布
sh11223312的博客
06-07 572
【代码】el-tree设置每个节点的连接线 修改展开图标为加减号（附效果图）
element tree组件连接线以及懒加载
分享互联网的有趣知识~
06-12 1411
element-tree组件连接线以及懒加载和懒加载全部展开
elementui tree 支持虚拟滚动和treeLine （上）
嗝~
06-09 2605
最终在查阅相关资料时，发现github有一个大佬使用vue-virtual-scroller自己写了一个elementui tree的扩展组件。同时这款组件还能完美的继承elementui tree上的属性和方法，算是过渡最为平滑的组件了。需求变更：虽然虚拟滚动实现了，但是在演示的时候领导觉得，还是加个treeLine 更好看。所谓的treeLine 就是tree展开时，侧边那一条条带有结构性质的边线。确认这个ui就是我们要的，下一步就是发布到npm了。的源码上进行调整，毕竟业务代码已经写了那么多了。
elementUI树形组件添加连接线（附效果图）
会点php的前端小渣渣
03-17 6030
<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" .
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. **事件处理**：树形控件支持多种事件，如节点点击、节点展开/折叠等。在程序框图中添加相应的事件结构...
element中树形控件组件设置样式
weixin_61424410的博客
07-07 3138
在实际开发中一些element-ui中的树形控件基本样式无法满足我们的设计需求，所以我们一般要进行二次修改下面是我实际开发中需要修改的样式 然而element提供的树形控件是我们的思路是给伪元素加样式实现虚线连接 拓展自定义节点内容给节点添加图标并设置不同的颜色 设置动态icon以及颜色 在script中设置其对应的数据 最终的样式 给大家把最终代码展示如下...
element中的横线_vue中elementUI的tree组件的使用（加线条加自定义图标）
weixin_42552124的博客
12-30 3372
后台管理系统是从layui过来的，所以总是觉得elementUI的tree组件线条没了不好看，第一中效果有线条image.pnghtml要在tree组件的直系父集上面加class名字tree-container，在自己加tree的classref="tree"class="tree filter-tree":data="data":props="defaultProps":filter-node-...
修改element-ui中Tree树形结构前面的三角形图标
可可爱爱的你吖的博客
08-25 2603
修改element-ui中Tree树形结构前面的三角形图标
element-ui 中 el-tree 和 el-table 样式调整
来杯卡布奇诺的博客
12-05 3836
使用 el-tree 和 el-table 时，往往需要根据项目整体环境做一些样式调整，记录一下常用样式。el-tree el-table PS: $bottomContainerBackColor 是 scss 变量：
vue3项目element-plus，树组件el-tree修改下拉图标，增加引导线
Thurmanwang的博客
12-07 8193
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="
ElementUI el-tree 添加虚线实现方案
今夏的博客
03-06 864
ElementUI el-tree 添加虚线实现方案
Vue项目-Element-UI el-tree样式修改
StupidlyGrass的博客
01-11 1747
1、错误示例（数据添加成功，页面不渲染）
vue中ElementUI Tree树形控件的树节点checkbox图标设置方法
EdwardLiu601的博客
07-24 5081
vue中ElementUI Tree树形控件的树节点checkbox图标设置方法
在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、付费专栏及课程。

余额充值