Vue element树形控件添加虚线详解
程序员文章站
2022-04-21 10:02:53
目录1.实现效果2.实现代码3.其他实现总结1.实现效果2.实现代码树形控件虚线的添加主要通过控制css来实现，并且在树形控件的缩进数只能为0，令class=“mytree”
总结
1.实现效果
2.实现代码
树形控件虚线的添加主要通过控制css来实现，并且在树形控件的缩进数只能为0，令class=“mytree”
<div class="mytree">
<!--indent只能为0-->
<el-tree
:data="tree_data"
:props="defaultprops"
@node-click="handlenodeclick"
indent="0"
:render-content="rendercontent"
></el-tree>
</div>
css的设置为以下代码，使用了::v-deep进行样式穿透
<style lang="scss" scoped>
::v-deep .mytree {
.el-tree > .el-tree-node:after {
border-top: none;
}
.el-tree-node {
position: relative;
padding-left: 16px;
}
//节点有间隙，隐藏掉展开按钮就好了,如果觉得空隙没事可以删掉
.el-tree-node__expand-icon.is-leaf{
display: none;
}
.el-tree-node__children {
padding-left: 16px;
}
.el-tree-node :last-child:before {
height: 38px;
}
.el-tree > .el-tree-node:before {
border-left: none;
}
.el-tree > .el-tree-node:after {
border-top: none;
}
.el-tree-node:before {
content: "";
left: -4px;
position: absolute;
right: auto;
border-width: 1px;
}
.el-tree-node:after {
content: "";
left: -4px;
position: absolute;
right: auto;
border-width: 1px;
}
.el-tree-node:before {
border-left: 1px dashed #4386c6;
bottom: 0px;
height: 100%;
top: -26px;
width: 1px;
}
.el-tree-node:after {
border-top: 1px dashed #4386c6;
height: 20px;
top: 12px;
width: 24px;
}
}
</style>
3.其他实现
element-ui实现树形控件节点添加图标
总结
本篇文章就到这里了，希望能够给你带来帮助，也希望您能够多多关注的更多内容!