vue element-ui tree 鼠标移入出现添加、修改、删除等按钮

1、tree 组件代码

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

2、样式style

<style rel="stylesheet/scss" lang="scss">
  .tree_w {
    padding: 20px 30px
  }


  .custom-tree-node {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 14px;
    padding-right: 8px;
    color: #4386c6;

  }

  .el-ic {
    display: none;
    i, span {
      padding: 0 14px;
      font-size: 18px;
      font-weight: 600;
    }
    .svg-icon {
      color: #4386c6;
    }
  }

  .el-tree-node__content {
    height: 38px;
  }

  .el-tree-node__expand-icon {
    color: #428bca;
    /*padding: 10px 10px 0px 10px !important;*/
  }

  .el-tree-node__content:hover .el-ic {
    color: #428bca !important;
    display: inline-block;

  }

  .el-tree-node__content:hover {
    font-weight: bold;
  }

  .el-tree--highlight-current .el-tree-node.is-current > .el-tree-node__content :hover {
    .el-tree-node__expand-icon.is-leaf {
      color: transparent;
      cursor: default;
    }
    /*background-color: #3998d9;*/
    .custom-tree-node {
      font-weight: bold;
    }
    .el-tree-node__expand-icon {
      font-weight: bold;
    }

  }

  .el-dialog__body {
    .upload-container .image-preview .image-preview-wrapper img {
      height: 100px;
    }
    .el-dialog .el-collapse-item__wrap {
      padding-top: 0px;

    }
    .spatial_img {
      .el-collapse-item__wrap {
        margin-bottom: 0;
        padding-top: 0px;
      }
    }

    .upload-container .image-preview .image-preview-wrapper {
      width: 120px;
    }

    .upload-container .image-preview .image-preview-action {
      line-height: 100px;
      height: 100px;
    }

  }

</style>

3、主要是根据css:hover属性去做，之前看到有人用js控制也实现，还是css更简单