ElementUI el-tree 添加虚线实现方案

最新推荐文章于 2024-10-22 09:30:00 发布

「已注销」

最新推荐文章于 2024-10-22 09:30:00 发布

阅读量1.3k

点赞数

CC 4.0 BY-SA版权

文章标签： elementui vue.js css css3

本文链接：https://blog.csdn.net/qq_49909215/article/details/129364609

本文介绍了如何在ElementUI的el-tree组件中添加虚线样式。通过为el-tree添加特定的class，并结合:indent属性来调整节点间缩进，再利用scss进行样式定制，实现了虚线效果。如果使用了score，则需要使用::v-deep进行样式穿透。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

最终效果

el-tree 添加class

<el-tree :load="loadTree" lazy :props="defaultProps" highlight-current @node-click="handleNodeClick"
 class="tree" :indent="0">
     <span slot-scope="{ data }">
         <i :class="data.iconSkin" class="tree-icon" />
         <span style="padding-left:4px;font-size:0.3rem">{
  
  { data.name}}</span>
     </span>
</el-tree>

同时还要设置一下 :indent="0" 这是el-tree组件里面的原有属性，用于设置相邻级节点间的水平缩进

最后设置tree的样式，我这里用的是scss，自己封装的一个组件，所以没有加score了，如果加了score 则需要 ::v-deep做样式穿透

<style lang="scss">
.tree {
    .el-tree-node {
        position: relative;
        padding-left: 0; 

            &::before {
               border-left: none;
            }

            &