Debug-008-el-tree-叶子节点图标的显示

最近做了好几个有el-tree的页面，坑是真的多。不过对其中的方法和属性更熟悉了。光一个el-tree我写10篇博文估计都不够，方法属性贼多。今天实现了一个小功能，分享一下

请看效果：

el-tree叶子节点添加图标按钮

直接上代码：

HTML:

<div class="tree-wrap">
        <el-tree
          ref="treeRef"
          class="flow-tree"
          :data="treeData"
          :props="defaultProps"
          default-expand-all
          node-key="name"
          :current-node-key="currentNodeKey"
          :expand-on-click-node="false"
          :default-expanded-keys="treeNodeArr"
          highlight-current
          :filter-node-method="filterNode"
          @node-click="handleTreeClick"
        >
          <template #default="{ node, data }">
            <div class="tree-label">
              <div>{{ (node) }}</div>
              <div>
                <span>
                  <circle-plus class="el-icon-delete" style="width: 16px; height: 16px;color: #4b88ff;" @click.stop="append(node, data)" />
                </span>
                <span>
                  <delete class="el-icon-delete" style="width: 16px; height: 16px;margin-left: 10px;color: #4b88ff;" @click.stop="remove(node, data)" />
                </span>
              </div>
            </div>
          </template>
        </el-tree>
      </div>

css:

  .tree-label {
    display: flex;
    justify-content: space-between;
    width: 100%;

    //默认隐藏
    .el-icon-delete {
      visibility: hidden;
    }
  }
  //悬浮显示图标
  .el-tree-node__content:hover .el-icon-delete {
    visibility: visible;
  }

主要是利用了CSS的显示隐藏，没什么讲的。至于el-tree的那些属性，我准备单独再来分享一次

 Debug-008-el-tree中点击叶子节点方法中的Node对象中的各个参数的含义

补充：

还有就是用到了这两个方法，但这不是本节的重点：

本来以为要自己写的，结果人家早就已经封装好了，所以还是要对文档熟悉