脚本宝典收集整理的这篇文章主要介绍了Vue element树形控件添加虚线详解,脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。
树形控件虚线的添加主要通过控制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>
Element-ui实现树形控件节点添加图标
本篇文章就到这里了,希望能够给你带来帮助,也希望您能够多多关注脚本宝典的更多内容!
以上是脚本宝典为你收集整理的Vue element树形控件添加虚线详解全部内容,希望文章能够帮你解决Vue element树形控件添加虚线详解所遇到的问题。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。