vue3 element-plus 右键菜单点击高亮选中树节点

本文介绍了如何在Vue中利用El-Tree组件进行节点操作,包括设置节点属性如`node-key`和`highlight-current`,监听`node-click`和`node-contextmenu`事件,以及通过`setCurrentKey`方法高亮选中节点。同时,展示了在右键点击事件中处理节点的显示逻辑,如添加、编辑和删除按钮的显示条件。
摘要由CSDN通过智能技术生成

关键在于必须设置tree属性:

  •           ref="treeRef"
  •           node-key="sucNormCode"
  •           highlight-current
  •           @node-contextmenu="rightClick"
  •           @node-click="handleTreeNodeClick" 

以及

treeRef.value.setCurrentKey(data.sucNormCode); 
<el-tree
          class="filter-tree"
          :data="state.data"
          :props="state.treeProps"
          :filter-node-method="filterNode"
          ref="treeRef"
          node-key="sucNormCode"
          highlight-current
          @node-contextmenu="rightClick"
          @node-click="handleTreeNodeClick"
        >
</el-tree>
const rightClick = (e, data, node, comp) => {
      treeRef.value.setCurrentKey(data.sucNormCode);
      // treeRef.value.setCurrentNode(data);
      
      state.rightMenu = { top: e.pageY + "px", left: e.pageX + "px" };
      state.tmDisplay = true;
      state.tempRightClickData = data;
      const self = state;
      if (data.dataList && data.dataList.length === 0) {
        // 叶子节点
        state.showAddBtn = false;
        state.showEditBtn = true;
        state.showDelBtn = true;
      } else {
        state.currNode = {};
        state.showAddBtn = true;
        state.showEditBtn = false;
        state.showDelBtn = false;
      }
      if (data.sucNormCode === "0" || data.parSucNormCode === "#") {
        state.showAddBtn = false; // 只允许叶子节点的父节点新增 其余节点都不允许
        state.operType = "add";
      }
      document.onclick = function (ev) {
        if (ev.target !== document.getElementById("perTreeMenu")) {
          self.tmDisplay = false;
        }
      };
    };

  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 2
    评论
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

hzxOnlineOk

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值