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


猜你喜欢
- Boa服务器下的ajax与cgi通信 2023-01-20
- CSS重新定义项目符号和编号技巧 2022-10-16
- Vue组件的一些常用生命周期钩子函数介绍 2025-01-14
- jquery animate实现鼠标放上去显示离开隐藏效果 2024-02-07
- 14款经典网页图片和文字特效的jQuery插件-前端开发必备 2024-02-20
- chrome监听cookie变化与赋值问题 2024-03-01
- React useCallback钩子的作用方法demo 2024-02-19
- 清除网页历史记录,屏蔽后退按钮! 2024-03-01
- jQuery基于cookie实现换肤功能实例 2024-03-01
- Vuejs轻松实现把生成二维码的弹窗保存到相册 2024-12-09