vue 组件el-tree添加结构指示线条

效果展示:

注意:组件中需要添加:indent="0" 进行子级缩进处理,否则会出现子级缩进逐级递增

:expand-on-click-node="false" 设置点击箭头图标才会展开或者收起

代码:

html 复制代码
<el-tree class="tree filter-tree" 
    :data="treeList" 
    :props="defaultProps" 
    default-expand-all 
    :indent="0"
    :expand-on-click-node="false" 
    @node-click="handleNodeClick" 
    :filter-node-method="filterNode" 
    highlight-current ref="tree">
</el-tree>
css 复制代码
/* 点击树结构项的选中颜色 */
    .el-tree--highlight-current .el-tree-node.is-current>.el-tree-node__content {
        background-color: #c7d1de;
    }

    /* 树形结构节点添加连线 */
    .tree {
        .el-tree-node {
            position: relative;
            padding-left: 20px;
            /* 缩进量 */
        }

        .el-tree-node__children {
            padding-left: 20px;
            /* 缩进量 */
        }

        /* 竖线 */
        .el-tree-node::before {
            content: "";
            height: 100%;
            width: 1px;
            position: absolute;
            left: -3px;
            top: -26px;
            border-width: 1px;
            border-left: 1px dashed #52627C;
        }

        /* 当前层最后一个节点的竖线高度固定 */
        .el-tree-node:last-child::before {
            height: 38px;
            /* 可以自己调节到合适数值 */
        }

        /* 横线 */
        .el-tree-node::after {
            content: "";
            width: 24px;
            height: 20px;
            position: absolute;
            left: -3px;
            top: 16px;
            border-width: 1px;
            border-top: 1px dashed #52627C;
        }

        /* 去掉最顶层的虚线,放最下面样式才不会被上面的覆盖了 */
        &>.el-tree-node::after {
            border-top: none;
        }

        &>.el-tree-node::before {
            border-left: none;
        }

        /* 展开关闭的icon */
        .el-tree-node__expand-icon {
            font-size: 16px;

            /* 叶子节点(无子节点) */
            &.is-leaf {
                color: transparent;
                /* 也可以去掉 */
                display: none;
            }
        }

    }
相关推荐
热爱编程的小曾4 分钟前
sqli-labs靶场 less 8
前端·数据库·less
gongzemin15 分钟前
React 和 Vue3 在事件传递的区别
前端·vue.js·react.js
Apifox28 分钟前
如何在 Apifox 中通过 Runner 运行包含云端数据库连接配置的测试场景
前端·后端·ci/cd
-代号952732 分钟前
【JavaScript】十四、轮播图
javascript·css·css3
麦麦大数据1 小时前
neo4j+django+deepseek知识图谱学习系统对接前后端分离前端vue
vue.js·django·知识图谱·neo4j·deepseek·在线学习系统
树上有只程序猿1 小时前
后端思维之高并发处理方案
前端
庸俗今天不摸鱼2 小时前
【万字总结】前端全方位性能优化指南(十)——自适应优化系统、遗传算法调参、Service Worker智能降级方案
前端·性能优化·webassembly
QTX187302 小时前
JavaScript 中的原型链与继承
开发语言·javascript·原型模式
黄毛火烧雪下2 小时前
React Context API 用于在组件树中共享全局状态
前端·javascript·react.js
Apifox2 小时前
如何在 Apifox 中通过 CLI 运行包含云端数据库连接配置的测试场景
前端·后端·程序员