<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组件如何添加虚线指示


基础教程推荐
猜你喜欢
- JS实现左侧菜单工具栏 2022-08-31
- nginx删除.php和.html文件扩展 2023-10-25
- JavaScript 模块化详解 2023-08-11
- vscode操作vue项目的相关步骤 2023-10-08
- 零基础最详细html和css 2023-10-27
- 完美解决ajax跨域请求下parsererror的错误 2023-01-26
- Ajax返回数据之前的loading等待效果 2023-02-14
- vue播放flv、m3u8视频流(监控)的方法实例 2023-12-21
- 超级简单实现JavaScript MVC 样式框架 2024-01-06
- 新手学习css优先级 2022-11-16