首页 > 其他分享 >element-UI dropdown 传多个参数

element-UI dropdown 传多个参数

时间:2022-08-27 21:13:14浏览次数:56  
标签:node dropdown type show element command UI data

<el-tree :data="layersName" :props="defaultProps" node-key="id" :default-checked-keys="checked" show-checkbox
          @check-change="handleCheckChange" draggable :allow-drop="allowDrop" @node-drop="handleDrop">
          <div class="slot-content" slot-scope="{ node, data }">
            <div class="desc">
              <span>{{ node.label }}</span>
            </div>
            <div class="icon">
              <el-tooltip class="item" content="缩放至此图层" :open-delay="1500" placement="top-start">
                <i class="el-icon el-icon-zoom-in" @click="zoomHandle(node, data)"></i>
              </el-tooltip>
              <el-tooltip class="item" content="删除此图层" :open-delay="1500" placement="top-start">
                <i class="el-icon el-icon-delete" @click="() => remove(node, data)"></i>
              </el-tooltip>
              <el-dropdown @command="handleCommand" :show-timeout="500" size="mini">
                <i class="el-icon el-icon-s-fold"></i>
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item :command="beforeHandleCommand('a',node, data)" icon="el-icon-c-scale-to-original">查看属性表</el-dropdown-item>
                  <el-dropdown-item command="b">狮子头</el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>
            </div>
          </div>
</el-tree>
handleCommand(command) {
  switch (command.command) {
    case "a":
      this.show(command)
      break;
    case "b":
      this.show(command)
      break;
  }
},
beforeHandleCommand(type,node, data){
    return {type,node, data}
},

其实就是给command绑定一个回调函数,通过回调函数来实现传参。

标签:node,dropdown,type,show,element,command,UI,data
From: https://www.cnblogs.com/echohye/p/16631465.html

相关文章

  • log4j升级到log4j2,并配合druid插入数据库
    2022元旦前报的全球Log4j日志严重漏洞问题,第一次报漏洞的时候我这边版本不在影响范围内,又过了两个月通知我:公司要求全部更新到最新版log4j2。当时正烦躁在别的项目,于是就......
  • 在使用element plus中select组件 关于下拉框位置偏移的解决方法
    造成原因:缩放屏幕时,下拉框会随着屏幕的缩放而偏移解决办法:el-select标签中使用popper-class设置teleported=“false”,再去修改你的样式到正确的位置上<el-select......
  • layui列表显示
    layui列表显示table数据表格文档-Layui(layuion.com)自动渲染所谓的自动渲染,即:在一段table容器中配置好相应的参数,由table模块内部自动对其完成渲染,而无需......
  • 学习随笔——codeforces题目Build Permutation解答
    摘要:本题属于构造算法,虽然简单但对思维提升有一定帮助题目原地址如下:https://codeforces.com/problemset/problem/1713/C题目截图如下:  关键词:构造算法,动态规划,*120......
  • WDA学习(23):UI Element:Radio Button Group & CheckBox Group使用
    1.16UIElement:RadioButton&CheckBox使用本实例测试RadioButtonGroup,CheckBoxGroup等的使用。注:DropdownByKey,DropdownByIndex使用方式和RadioButtonGroupByKe......
  • 【FAQ】【JAVA UI】HarmonyOS 如何获取uid和pid
    ​ 【问题描述】鸿蒙中怎么样可以获取Uid和Pid 【解决方案】try{BundleInfobundleInfo=getContext().getBundleManager().getBundleInfo(getBund......
  • QQuickImageProvider的使用
    一、概述QQuickImageProvider用于在QML应用程序中提供高级图像的加载功能。(在c++中提供图像路径,编辑等底层数据交互逻辑,在qml端调用显示)它允许QML中的图像被:使用QPixmap......
  • uniGUI学习之UniTreeview(56)
    UniTreeview中能改变一级目录的字体和颜色functionbeforeInit(sender,config){ID="#"+config.id;Ext.util.CSS.createStyleSheet(`${ID}.x-tree-node-text{c......
  • Mac机使用移动硬盘遇到Gradle build failed问题及解决
    先说结论:项目所在的移动硬盘,不能用exFat磁盘格式,否则Gradle会出错。使用Mac作为打包机,由于硬盘满了,挂了一块移动硬盘来作为项目的工作硬盘,结果用Unity打包时死活打......
  • npm run build 内存溢出处理办法
    在内存小的服务器对webpack工程打包的时候遇到的一个问题,其中有一种办法是通过扩大node内存处理,其修改命令如下:node--max_old_space_size=2048test.js因为是使用......