<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的鼠标监听mouseup鼠标抬起失效原因及解决 2023-07-10
- vue.js 2023-10-08
- jQuery滚动条美化插件nicescroll简单用法示例 2024-01-17
- 基于jquery实现页面滚动到底自动加载数据的功能 2023-12-20
- MacBook如何真正设置是否显示隐藏文件 2024-12-13
- javascript中常见的六种报错解析 2022-12-12
- 浅谈Selenium+Webdriver 常用的元素定位方式 2023-12-21
- php – html选择多项选择输入,将它们存储在mysql db中并搜索匹配项 2023-10-25
- 在IE中为abbr标签加样式 2022-10-16
- JQuery 实现的页面滚动时浮动窗口控件 2024-01-07
