账号密码登录
忘记密码注册账号
微信安全登录
微信扫描二维码登录

登录后绑定QQ、微信即可实现信息互通

手机验证码登录
获取验证码
找回密码返回
邮箱找回 手机找回
获取验证码
注册账号返回
获取验证码
其他登录方式
登录即同意《用户使用协议》和《用户隐私条款》
问答主页 -> 电脑网络
分享
  • 收藏
    X
    elementUI el-tree树形控件如何实现右键的hover效果
    49
    0
    使用el-tree结构数，从后端请求接口渲染的数据；如何实现鼠标右键点击某条目录跳出菜单点击菜单数据后还是显示高亮只到点击下一个；浏览器的右键菜单我禁止了； <el-tree class="filter-tree" :data="towerData" :props="defaultProps" :default-expand-all="true" :filter-node-method="filterNode" :expand-on-click-node="false" ref="tree" slot="reference" highlight-current node-key="id" @node-click="hidedialog = false" @node-contextmenu="contextmenuClick" > </el-tree>我把接口数据提取出一部分测试： towerData: [{ pilename: "0", pilelist: [ { "towerguid": "75fc4c28-5013-5e1adc04554", "lon": 108.95431, "pilename": "N5802", "lat": 33.36075, "height": 971.8 }, { "towerguid": "76083874-5013-5e1adc04554", "lon": 108.957736, "pilename": "N5803", "lat": 33.360703, "height": 1086 }, { "towerguid": "76168474-8d6c-54e1adc04554", "lon": 108.951583, "pilename": "N5804", "lat": 33.357781, "height": 1120 }, { "towerguid": "762270f4-9ce3-5e1adc04554", "lon": 108.961542, "pilename": "N5805", "lat": 33.355142, "height": 1110.9 }, { "towerguid": "7630eb1a-ab9-54e1adc04554", "lon": 108.968747, "pilename": "N5806", "lat": 33.38285, "height": 1173 }], }, ],鼠标右击监听方法：method:{ // 鼠标右击事件 contextmenuClick(ev, data, node) { //方法一：不正确，没有实现效果 //这种方式只能实现左键的高亮效果，实现不了右键的效果 // this.$nextTick(function(){ // this.$refs['tree'].setCurrentKey(node.id); // }) //方法二：不正确，没有实现效果 //ev.path[1].style.background='red'; }}方法二效果图：他这个之前点击的移除不掉；哪位大神能帮忙看一下这个要怎么实现呢？？
    0
    打赏
    收藏
    点击回答
        全部回答
    • 共 0 条
    • 棉花糖味的小仙女 普通会员 1楼

      在ElementUI的el-tree树形控件中，我们可以使用hover事件来实现右键的hover效果。以下是一个简单的示例：

      首先，我们需要在组件的根节点（即tree节点）上添加一个hover事件监听器，如下所示：

      ```html <el-tree :data="data" :key="treeKey" :expand-on-click="false" :props="defaultProps" hover="true" @hover="handleHover"

      ```

      defaultProps是用于渲染默认树节点的属性，包括data、key、props等，这里我们不做详细描述。

      hover事件监听器定义了一个方法handleHover，在鼠标悬停在节点上时调用。以下是一个简单的实现：

      javascript methods: { handleHover(node) { console.log('鼠标悬停在' + node.props.data); } }

      在handleHover方法中，我们打印出鼠标悬停在节点上时的属性data，这将显示出当用户点击节点时的子节点列表。

      然后，在父节点上添加一个open属性，用于控制是否打开子节点列表，open默认值为false，表示子节点列表不打开。如下所示：

      ```html <el-tree :data="data" :key="treeKey" :props="defaultProps" hover="true" @hover="handleHover" open="true"

      ```

      在这个示例中，当鼠标悬停在父节点时，open属性将被设置为true，表示子节点列表将打开。

      需要注意的是，open属性在树节点的expand事件回调函数中应该被处理。以下是修改后的示例：

      javascript methods: { handleHover(node) { console.log('鼠标悬停在' + node.props.data); }, handleExpand(node) { console.log('鼠标悬停在' + node.props.data); } }

      在这个示例中，当鼠标悬停在父节点时，handleHover方法和handleExpand方法将被调用，分别处理子节点列表的展开和隐藏。在展开或隐藏子节点时，expand事件的回调函数将被调用，此时open属性将被设置为true或false，根据expand事件的状态来决定子节点列表是否打开。

    0 打赏 回复
    更多回答
    网站公告
    扫一扫访问手机版

    回答动态

    • 回到顶部
    • 回到顶部