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

"这段代码展示了一个使用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');
},

以上就是全部代码

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值