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

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>

http://www.kler.cn/a/573691.html

相关文章:

  • 蓝桥备赛(九)- 结构体和类
  • linux检查内存
  • springboot3.x下集成hsqldb数据库
  • wxWidgets GUI 跨平台 入门学习笔记
  • 问题描述:如何将ts文件转换mp4文件
  • 人工智能】数据挖掘与应用题库(401-500)
  • todo: 使用融云imserve做登录(android)
  • xshell中bashdb 调试器的详细使用方法
  • 【全栈开发】---- 一文掌握 Websocket 原理,并用 Django 框架实现
  • 飞机大战lua迷你世界脚本
  • 软件工程与实践(第4版 新形态) 练习与实践1
  • kettle插件-高性能插入更新插件Upsert
  • ZT26 小球投盒
  • 网络安全需要掌握哪些技能?
  • 解决java-jar报错:xxx.jar 中没有主清单属性的方法
  • Linux断电重启后,硬盘挂载失败问题。
  • 解决新建小程序页面文字顶在顶部问题
  • Android开发Android调web的方法
  • 获取Kernel32基地址
  • Docker小游戏 | 使用Docker部署DOS游戏合集