element tree组件鼠标移入显示设置，dropdown下拉框可以创建编辑删除节点

爱吃火腿的子车鸿轩

已于 2022-03-02 17:01:39 修改

阅读量812

点赞数

文章标签： javascript vue.js elementui

于 2022-03-02 17:00:17 首次发布

本文链接：https://blog.csdn.net/weixin_39143969/article/details/123234654

版权

"这段代码展示了一个使用Element UI库实现的交互式树形组件。它支持默认展开所有节点、节点鼠标悬停和离开时的事件处理、以及创建、编辑和删除节点的上下文菜单操作。树形数据来源于"dataTree"属性，提供了节点点击和鼠标事件的自定义处理。"

摘要由CSDN通过智能技术生成

<el-tree
        ref="tree"
        :expand-on-click-node="false"
        :default-expand-all="true"
        :data="dataTree"
        node-key="id"
        accordion
        empty-text="暂无数据"
        highlight-current
      >
        <span class="d-flex span-ellipsis" slot-scope="{node,data}"   @mouseleave="mouseleave(data,$event)">
          <span class="node-title" :title="node.label" @mouseover="mouseover(data,$event)">
            {{node.label}}
          </span>
          <el-dropdown class="node-icon none">
            <span class="el-dropdown-link">
              <i class="el-icon-setting"></i>
            </span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item @click.native="createDep(node,data)">创建部门</el-dropdown-item>
              <el-dropdown-item @click.native="editDep(node,data)">编辑部门</el-dropdown-item>
              <el-dropdown-item @click.native="deleteDep(node,data)">删除部门</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
      	</span>
 </el-tree>
mouseleave(data,$event){
  this.$emit("mouseleave", data, $event);
}
mouseover(data,$event){
  this.$emit("mouseover", data, $event);
}

引用组件：

在这里插入代码片
<tree 
:dataTree="dataTree" 
@mouseleave="mouseleave"
@mouseover="mouseover"
@createDep="createDep"
@editDep="editDep"
@deleteDep="deleteDep"
ref="tree" />
mouseleave(data,$event){  $event.currentTarget.firstElementChild.nextElementSibling.nextElementSibling.setAttribute('class','node-icon none el-dropdown-link')
},
mouseover(data,$event){$event.currentTarget.nextElementSibling.nextElementSibling.setAttribute('class','node-icon block el-dropdown-link');
},

以上就是全部代码