关于javascript:element-树形控件eltree-添加hover事件-完整代码

  <el-tree class="filter-tree" :render-content="renderContent" :data="data" :props="defaultProps" default-expand-all :filter-node-method="filterNode"
    ref="tree">
  </el-tree>

  export default {data() {
      return {    
        data: [{
          id: 1,
          label: '一级 1',
          is_show:false,
          children: [{
            id: 4,
            label: '二级 1-1',
            is_show:false,
            children: [{
              id: 9,
              is_show:false,
              label: '三级 1-1-1'
            }, {
              id: 10,
              is_show:false,
              label: '三级 1-1-2'
            }]
          }]
        }],
        defaultProps: {
          children: 'children',
          label: 'label'
        }
      }
    },
  methods: {append(data) {const newChild = { id: id++, label: 'testtest', children: [] };
        if (!data.children) {this.$set(data, 'children', []);
        }
        data.children.push(newChild);
      },

      remove(node, data) {
        const parent = node.parent;
        const children = parent.data.children || parent.data;
        const index = children.findIndex(d => d.id === data.id);
        children.splice(index, 1);
      },
      /** 这里是要害一步，实现 hover */
      renderContent(h, { node, data, store}) {console.log(data)
        return (<span class="custom-tree-node" on-mouseover={()=>{data.is_show=true}}  on-mouseout={()=>{data.is_show=false}}>
            <span>{node.label}</span>
            {
              data.is_show ? 
              <span>
              <el-button size="mini" type="text" on-click={() => this.append(data)}> 增加 </el-button>
              <el-button size="mini" type="text" on-click={() => this.remove(node, data)}> 编辑 </el-button>
              <el-button size="mini" type="text" on-click={() => this.remove(node, data)}> 删除 </el-button>
             </span> : null
            }

          </span>);
      },

    }