el-tree鼠标移入才展示树的图标

看了这篇文章，结合自己的需求改了下鼠标移入展示图标
1.需求

2.实现
在template中

<el-tree
  :data="treeData"
  node-key="classCode" // 动态获取到的数据的唯一值即可
  highlight-current
  ref="menuTree"
  :props="defaultProps"
  :style="{height: treeHeight + 'px'}"
  @node-click="handleNodeClick"
>
  <span class="custom-tree-node" slot-scope="{ node, data }" @mouseover="treeMouseOver($event, data)" @mouseleave="treemouseLeave($event, data)" style="width: 100%;">
    <span>{{ node.label }}</span>
    <span style="position: absolute;right: 0;width: 112px;" class="node-none">
      <el-tooltip effect="dark" content="新增" placement="top" style="margin-left: 8px;">
        <span v-if="data.validFlag==='1'">
          <el-button
            type="text"
            size="mini"
            class="purchmanager-button-add"
            @click="() => parentTreeNode(node, data, '1')">
          </el-button>
        </span>
      </el-tooltip>
      <el-tooltip effect="dark" content="修改" placement="top" style="margin-left: 40px;">
        <span v-if="data.validFlag==='1'">
          <el-button
            type="text"
            size="mini"
            class="purchmanager-button-edit"
            @click="() => openEditWindow('2', data)">
          </el-button>
        </span>
      </el-tooltip>
      <el-tooltip effect="dark" content="停用" placement="top" style="margin-left: 32px;">
        <span style="margin-right: 5px;" v-if="data.validFlag==='1'">
          <el-button
            type="text"
            size="mini"
            class="purchmanager-button-stop"
            @click="() => userStop('stop', data)">
          </el-button>
        </span>
      </el-tooltip>
      <el-tooltip effect="dark" content="启用" placement="top" style="margin-left: 80px;">
        <span style="margin-right: 5px;" v-if="data.validFlag==='0'">
          <el-button
            type="text"
            size="mini"
            class="purchmanager-button-use"
            @click="() => userStop('use', data)">
          </el-button>
        </span>
      </el-tooltip>
    </span>
  </span>
</el-tree>

在data中

data () {
	return {
	  defaultProps: {
        children: 'children',
        label: 'classDesc'
      },
	}
}

computed中，计算树的高度，自适应

computed: {
 treeHeight: function () {
   return window.innerHeight - 174
 }
},

methods中

// 鼠标移入移出事件
treeMouseOver (e, data) {
   if(e.target.lastElementChild) {
   	 // 鼠标移入移出要做个判断，鼠标是否在树节点上，如果在才赋值，不在就不要赋值，否则会一直报错
     e.target.lastElementChild.setAttribute('class', 'node-block'); // 设置显示样式
   }
 },
 treemouseLeave (e, data) {
   if (e.target.lastElementChild) {
     e.target.lastElementChild.setAttribute('class', 'node-none') // 设置隐藏样式
   }
 },
handleNodeClick (data, node) {
 // 点击节点时做啥操作
},
 // 这是第二种render方法的，只在此记录一下，如下两图
 renderContent (h, { node, data, store }) {
      let render = [];
      if (data.validFlag === '0') {
        // 作废的
        render = [
          h('span', {
            class: 'purchmanager-button-edit',
            attrs: {
              title: '启用'
            },
            on: {
              click: (event) => {
                this.userStop('use', data);
                event.stopPropagation();
              }
            }
          })
        ];
      } else {
        render = [
          h('span', {
            class: 'purchmanager-button-add',
            attrs: {
              title: '新增'
            },
            on: {
              click: (event) => {
                this.parentTreeNode(node, data, '1');
                event.stopPropagation();
              }
            }
          }),
          h('span', {
            class: 'purchmanager-button-edit',
            attrs: {
              title: '修改'
            },
            on: {
              click: (event) => {
                this.openEditWindow('2', data);
                event.stopPropagation();
              }
            }
          }),
          h('span', {
            class: 'purchmanager-button-edit',
            attrs: {
              title: '停用'
            },
            on: {
              click: (event) => {
                this.userStop('stop', data);
                event.stopPropagation();
              }
            }
          })
        ];
      }
      return h('span',
      {
        style: {
          position: 'relative',
          width: '100%',
          fontSize: '14px'
        },
        class: 'fun-st-ellipsis'
      },
      [
        h('span', node.label),
        h('span', {
          style: {
            position: 'absolute',
            right: '1px',
            top: '9px'
          }
        }, render)
      ]);
    },

在style中

<style>
.node-none {
  display: none;
}
.node-block {
  display: inline;
}
</style>

看了这篇文章，结合自己的需求改了下鼠标移入展示图标