<el-tree
class="tree-line"
:data="treeOption"
:props="defaultProps"
@node-click="getCurrentNode"
>
利用样式添加虚线指示
.el-tree-style{
/deep/ .el-tree-node {
position: relative;
}
/deep/ .el-tree-node__children {
padding-left: 16px;
}
/deep/ .el-tree-node::before {
content: '';
height: 100%;
width: 1px;
position: absolute;
left: 30px;
top: 0;
border-width: 1px;
border-left: 1px dashed #ddd;
}
/deep/ .el-tree-node:last-child::before {
height: 38px;
}
/deep/ .el-tree-node::after {
content: '';
width: 15px;
height: 20px;
position: absolute;
left: 30px;
top: 12px;
border-width: 1px;
border-top: 1px dashed #ddd;
}
& > .el-tree-node::after {
border-top: none;
}
& > .el-tree-node::before {
border-left: none;
}
.el-tree-node__expand-icon {
font-size: 16px;
&.is-leaf {
color: transparent;
}
}
}
以上是编程学习网小编为您介绍的“el-tree组件如何添加虚线指示”的全面内容,想了解更多关于 vuejs 内容,请继续关注编程基础学习网。
沃梦达教程
本文标题为:el-tree组件如何添加虚线指示
基础教程推荐
猜你喜欢
- Angular获取ngIf渲染的Dom元素示例 2023-07-09
- JavaScript使用localStorage存储数据 2024-03-21
- Vue刷新后页面数据丢失问题的解决过程 2024-04-15
- 如何解决外边距margin叠加的问题探讨 2024-01-24
- react-router v6实现权限管理+自动替换页面标题的案例 2023-07-09
- 利用相对定位及偏移量做精美输入界面 2022-10-16
- JavaScript动画函数封装详解 2023-08-12
- HTML5 video视频播放标签如何添加封面图片 2023-07-08
- javascript 调用其他页面的js函数或变量的脚本 2024-02-06
- 浅谈CSS3鼠标移入图片动态提示效果(transform) 2024-01-23