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

蔚落 2022-09-16 11:27 1230阅读 0赞

关键在于必须设置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 条评论，1230人围观）

还没有评论，来说两句吧...

相关阅读

相关 vue3.0+elementplus 动态添加menu菜单

<template> <el-aside width="200px"> <el-menu router>

深藏阁楼爱情的钟/ 2023年09月29日 15:52/ 0 赞/ 32 阅读

相关 vue选中或点击输入框，边框高亮；vue选中或点击元素，当前元素背景高亮

1、vue 选中或点击输入框，边框高亮 ①：输入框动态绑定一个class，例`login-box-focus`，如下： :class="{ 'login-box-f

水深无声/ 2022年10月28日 03:43/ 0 赞/ 572 阅读

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

关键在于必须设置tree属性： > ref="treeRef" > node-key="sucNormCode" >

蔚落/ 2022年09月16日 11:27/ 0 赞/ 1231 阅读

相关鼠标右键点击事件

方式一 <el-button @contextmenu.prevent="clickRight()">保存</el-button> .prevent可以阻止弹出

我不是女神ヾ/ 2022年09月10日 10:27/ 0 赞/ 273 阅读

相关 JointJS点击选中元素高亮显示

使用 JointJs 时，当我们点击了选中的元素时，如果我们需要对点击元素高亮显示，点击空白处取消高亮显示的话，可以继续往下看代码实现。官方文档相关部分： [highl

心已赠人/ 2022年08月31日 12:23/ 0 赞/ 267 阅读

相关右键菜单

.h: afx\_msg void OnContextMenu(CWnd\ pWnd, CPoint point); afx\_msg void OnCopy();

青旅半醒/ 2022年08月27日 03:38/ 0 赞/ 344 阅读

相关 java table右键点击事件

表格监听步骤 > 1 给表格添加监听addMouseListener > 2 使用MouseAdapter类的mouseClicked方法 >

我就是我/ 2022年06月15日 09:26/ 0 赞/ 239 阅读

相关 vue结合Echarts实现点击高亮效果

vue结合Echarts实现点击高亮效果本文主要介绍如何在vue中使用Echarts实现点击高亮效果。 1、首先看一下官方网站上的介绍： http://echart

野性酷女/ 2022年06月05日 12:27/ 0 赞/ 621 阅读

相关 vue按钮高亮，添加类，点击高亮，路由router高亮linkExactActiveClass（多种方法实现）...

vue样式高亮使用vue/cli3脚手架创建一个有router路由的项目,并且运行该项目 vue create 'project-name' cnpm

╰+哭是因爲堅強的太久メ/ 2022年03月12日 07:40/ 0 赞/ 701 阅读

相关 vue循环与判断(点击高亮)

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXh

不念不忘少年蓝@/ 2022年02月14日 02:23/ 0 赞/ 460 阅读