欢迎来到尧图网

客户服务 关于我们

您的位置:首页 > 科技 > 能源 > vue 组件el-tree添加结构指示线条

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

2025/6/28 9:47:22 来源:https://blog.csdn.net/CONSOLE11/article/details/140077298  浏览:    关键词:vue 组件el-tree添加结构指示线条

效果展示:

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

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

代码:

<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>
/* 点击树结构项的选中颜色 */.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;}}}

版权声明:

本网仅为发布的内容提供存储空间,不对发表、转载的内容提供任何形式的保证。凡本网注明“来源:XXX网络”的作品,均转载自其它媒体,著作权归作者所有,商业转载请联系作者获得授权,非商业转载请注明出处。

我们尊重并感谢每一位作者,均已注明文章来源和作者。如因作品内容、版权或其它问题,请及时与我们联系,联系邮箱:809451989@qq.com,投稿邮箱:809451989@qq.com

热搜词