vue element-ui tree 节点加虚线，样式修改_iview tree 虚线-优快云博客

本文介绍了如何在Vue项目中，使用Element-UI的Tree组件时，为节点添加虚线边框，以及如何修改节点的默认样式，包括消除节点前的缩进。

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

   <el-tree
        ref="tree"
        :props="defaultProps"
        current-node-key="1"
        :load="loadNode"
        lazy
        indent="0"
        node-key="space_id"
        :default-expanded-keys="defaultExpanded"
        :filter-node-method="filterNode"
        :expand-on-click-node="true"
        highlight-current
        @node-collapse="nodeCollapse"
        @node-expand="nodeExpand"
      >
        <div class="custom-tree-node" slot-scope="{ node, data}">
          <div>
            <svg-icon icon-class="space" class="icon-space" v-if="!data.is_child||data.space_id=='0'"/>
            <svg-icon icon-class="file" class="icon-space" v-else/>
            <span @click.stop="expand(data)">{{ node.label }}</span>
            <span style="font-size: 11px;color: #3889b1"
                  v-if="data.space_property_name">（{{data.space_property_name}}）</span>
          </div>
          <span class="el-ic">

               <svg-icon icon-class="polices" title="添加行政区域" class="icon-space"
                         @click.stop="addSpatial(data,{'path':'Add','title':'添加行政区域'})"/>
               <svg-icon icon-class="example" title="添加公共区域" class="icon-space"
                         @click.stop="addSpatial(data,{'path':'Public','title':'新建公共区域'})"/>
               <svg-icon icon-class="danyuan" title="添加管理单元" class="icon-space"
                         @click.stop="addSpatial(data,{'path':'AddManageUnit','title':'新建管理单元'})"/>
            <!--<svg-icon icon-class="xiaoqu" title="添加小区" class="icon-space" @click.stop="addSpatial(data,{'path':'AddManageUnit','title':'新建小区'})"/>-->
               <i class="el-icon-edit" @click="editSpatial(data,'edit')" title="修改" v-if="data.space_id!='0'"></i>
               <svg-icon icon-class="detail" title="查看该空间详情" class="icon-space"
                         @click.stop="lookSpatial(data)" v-if="data.space_id!='0'"/>
               <i class="el-icon-delete" @click.stop="() => removeDialogVisible(node, data)" title="删除该空间"
                  v-if="data.space_id!='0'"></i>
             </span>
        </div>
      </el-tree>

1、给indent="0"，不要前面的缩进、

2、加样式

.el-tree-node{
  position: relative;
  padding-left: 16px;
}
.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,.el-tree-node:after{
  content: "";
  left: -4px;
  position: absolute;
  right: auto;
  border-width: 1px;
}
.tree :first-child .el-tree-node:before{
  border-left: none;
}
.el-tree-node:before {
  border-left: 1px dashed #4386c6;
  bottom: 0px;
  height: 100%;
  top: -20px;
  width: 1px;
}
.el-tree-node:after {
  border-top: 1px dashed #4386c6;
  height: 20px;
  top: 17px;
  width: 24px;
}