当前位置: 首页 > news >正文

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

一、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>

相关文章:

  • 数据挖掘校招面经一
  • 算法比赛中处理输入和输出
  • rabbitmq版本升级并部署高可用
  • JDBC、MyBatis 、MyBatis-Plus面试总结(一)
  • 【第14节】C++设计模式(行为模式)-Strategy (策略)模式
  • Spring Boot WebFlux 中 WebSocket 生命周期解析
  • 小程序分类页面
  • 字符串(三)14. 最长公共前缀 简单
  • 计算机网络面试题
  • ‌CentOS 7.9 安装 Docker 步骤
  • 带你从入门到精通——自然语言处理(五. 自注意力机制和transformer的输入部分)
  • C++第二节:C/C++内存管理
  • Mysql convert函数、convert用法、字符串转数字、字符串转日期、类型转换函数
  • 探索C/C++的奥秘之list
  • 第十三届青蓝桥杯青少年Scratch省赛真题——报数游戏
  • smplx 和smpl转换
  • NUMA架构介绍
  • 【Flink银行反欺诈系统设计方案】3.欺诈的7种场景和架构方案、核心表设计
  • 关于软件测试中的bug
  • 使用Dockerfile打包java项目生成镜像部署到Linux_java项目打docker镜像的dockerfile