el-tree右键节点动态位置展示菜单；el-tree的节点图片动态根据节点属性color改变背景色；加遮罩层（opacity）

我像在与风相爱

已于 2025-03-05 19:26:46 修改

阅读量527

点赞数 9

CC 4.0 BY-SA版权

分类专栏：推演文章标签： el-tree

于 2025-03-05 12:30:24 首次发布

本文链接：https://blog.csdn.net/weixin_46011290/article/details/146039870

一、el-tree右键节点动态位置展示菜单

关键：@node-contextmenu="handleRightClick"与@node-click=“handleNodeClick”

<div class="content">
      <el-tabs class="tabs" @tab-click="handleClick" v-model="Modal">
        <el-tab-pane label="外地" name="on">
          <el-input
              v-model="onFilterText"
              placeholder="搜索"
              clearable
          />
          <el-scrollbar>
            <el-tree 
              ref="onRef"
              :data="onData" 
              node-key="id" 
              :filter-node-method="filterOnNode"
              @node-contextmenu="handleRightClick"
              @node-click="handleNodeClick" 
              default-expand-all 
              >
              <template #default="{ node, data }">
                <slot :node="node" :data="data">
                  <img :src="data.icon" style="height: 25px;width: 25px">
                  <span style="margin: 0 10px;">{
  
  { data.name }}</span>
                </slot>
              </template>
            </el-tree>
          </el-scrollbar>
        </el-tab-pane>
        <el-tab