Vue element树形控件添加虚线详解

发布时间:2022-04-16 发布网站:脚本宝典
脚本宝典收集整理的这篇文章主要介绍了Vue element树形控件添加虚线详解脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。

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.其他实现

vue通过element树形控件实现树形表格

Element-ui实现树形控件节点添加图标

总结

本篇文章就到这里了,希望能够给你带来帮助,也希望您能够多多关注脚本宝典的更多内容!

脚本宝典总结

以上是脚本宝典为你收集整理的Vue element树形控件添加虚线详解全部内容,希望文章能够帮你解决Vue element树形控件添加虚线详解所遇到的问题。

如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。
标签: