Element UI 鼠标移入树形控件的树节点时显示编辑和删除按钮

 

<el-tree
  （树的一系列属性配置，略，移步官网）
>
  <span
    class="custom-tree-node show-btns"
    slot-scope="{ data }"
  >
    <span style="font-size: 14px">{{ data.name }}</span> // 节点名
    <span style="display: none" class="btns"> // 鼠标移入显示按钮，鼠标移出隐藏按钮
      <i class="el-icon-edit" @click="nodeEdit(data)"></i> // 编辑按钮
      <i // 删除按钮
        class="el-icon-delete"
        style="margin-left: 10px"
        @click="nodeDelete(data.id)"
      ></i>
    </span>
  </span>
</el-tree>

 

/deep/.el-tree {
  .el-tree-node__content:hover {
    background-color: #208bf830;
    .btns {
      display: inline-block !important;
    }
  }
}