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

最终效果

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 {
        positio