Element el-dropdown 事件

news2024/9/23 11:17:43

我这里是结合el-table一起使用

设置trigger="click" 就可以加点击事件

这里我需要点击下拉选择值后,既要得到下拉里面的值 也要得到这一行数据的值 

重要的代码


<el-dropdown
                  trigger="click"
                  @command="handleCommand($event,scope.row,scope.$index)"
                  @visible-change="changeDrop(scope.$index,'其他值')"
>
handleCommand(item,row,index) {
      console.log(item,"item")//下拉菜单里面的值
      console.log(row,"row")//表格里面的数据
      console.log(index,"index")//1 表格列下标
    this.tableData[index].auth = item.value
}

changeDrop(index, item) { //可以得到表格的值
      console.log(item,"cccc")//其他值
      this.tableData[index].auth = "赋值"
},
data(){
    return{
        permissionOptions: [
        { value: '1', label: '仅使用' },
        { value: '2', label: '可复制' },
        { value: '3', label: '可编辑' },
        // { value:"0",label: '移除权限' },
      ],
    }
}


<el-table-column align="center" prop="handle" label="操作">
            <template slot-scope="scope">
              <div style="margin-right:10px">
                <el-dropdown
                  trigger="click"
                  @command="handleCommand($event,scope.row)"
                  @visible-change="changeDrop(scope.$index)"
                >
                  <span class="el-dropdown-link">
                    <el-button type="primary" size="mini"
                      >{{ scope.row.auth == '1' ? '仅使用' : '可复制'
                      }}<i class="el-icon-arrow-down el-icon--right"></i
                    ></el-button>
                  </span>
                  <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item
                      :command="item"
                      v-for="(item, index) in permissionOptions"
                      :key="index"
                      >{{ item.label }}</el-dropdown-item
                    >
                  </el-dropdown-menu>
                </el-dropdown>
              </div>
              
            </template>
          </el-table-column>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/689967.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

7 拓展中断_事件控制器(EXTI)

目录 EXTI-扩展中断和事件控制器 事件的概念 EXTI-扩展中断和事件控制器 EXTI外设框图 F1/F4/F7&#xff08;看懂与或门&#xff09; H7 STM32CubeMX中的EXTI配置 EXTI-扩展中断和事件控制器 事件的概念 STM32上许许多多的外设&#xff0c;是通过内部信号来协同工作的。…

VMware麒麟Kylin系统安装Linux

麒麟系统常用链接 https://www.jianshu.com/p/f58e2435b650 ios下载链接 https://eco.kylinos.cn/partners/mirror.html 其实基本上只有两个区别&#xff0c;一个是桌面操作系统和服务器操作系统的区别&#xff0c;一个是x86_64和arm内核的区别&#xff0c;我下的是这个海光版…

Splashtop 荣获2023年教育科技突破奖

2023年6月8日 加利福尼亚州库比蒂诺 Splashtop 在简化随处办公远程解决方案领域处于领先地位&#xff0c;该公司自豪地宣布其在教育科技突破奖评选活动中荣获“年度远程学习解决方案供应商奖”。这项在教育行业久负盛名的奖项特别关注创新性解决方案和创意公司&#xff0c;这些…

BlendOS 3 正在开发:承诺支持九个 Linux 发行版,无存储库更新

导读blendOS 发行版承诺混合 Arch Linux、Fedora Linux 和 Ubuntu&#xff0c;今年 4 月发布的 blendOS 2 使用 WayDroid&#xff0c;承诺运行 Android 应用程序。 开发商 Rudra Saraswat 表示&#xff0c;不可变发行版 blendOS 3 系统正在开发中&#xff0c;并承诺为不可变发行…

Nginx优化及防盗链

目录 一、隐藏版本号 1.查看版本号 2.修改配置文件 3.重启服务及查看版本号 二、修改用户 与组 1.修改配置文件 2.重启服务 三、缓存时间 1.修改配置文件 2.重启服务 3.测试访问 四、日志分割 1.写脚本 2.赋予执行权限并执行 3.验证 4.设置定时任务 五、连接超时 2…

ctfshow文件包含web87-117

1.web87 绕过死亡待可以使用rot13编码,还可以用base64编码,url两次编码&#xff0c;浏览器自动进行解码一次&#xff0c;代码解码一次&#xff0c;如果之编码一次&#xff0c;代码会被浏览器解码一次&#xff0c;这时候特殊字符还是url编码&#xff0c;而如php字符串则被还原&a…

扩增子高通量测序

扩增子测序是指利用合适的通用引物扩增环境中微生物的16S rDNA/18S rDNA /ITS高变区或功能基因&#xff0c;通过高通量测序技术检测PCR产物的序列变异和丰度信息&#xff0c;分析该环境下的微生物群落的多样性和分布规律&#xff0c;以揭示环境样品中微生物的种类、相对丰度、进…

人工智能数据集处理——数据清理2

目录 异常值的检测与处理 一、异常值的检测 1、使用3σ准则检测异常值 定义一个基于3σ准则检测的函数&#xff0c;使用该函数检测文件中的数据&#xff0c;并返回异常值 2、使用箱形图检测异常值 根据data.xlsx文件中的数据&#xff0c;使用boxplot()方法绘制一个箱型图 …

headscale专有网络及其ACL控制

如何使用 Headscale ( Tailscale 开源版 ) 快速搭建一个私有专属的 P2P 内网穿透网络 内网穿透简述 由于国内网络环境问题, 普遍家庭用户宽带都没有分配到公网 IP(我有固定公网 IP, 嘿嘿); 这时候一般我们需要从外部访问家庭网络时就需要通过一些魔法手段, 比如 VPN、远程软…

未来的编程语言「GitHub 热点速览」

作者&#xff1a;HelloGitHub-小鱼干 又一个编程语言火了&#xff0c;不算新&#xff0c;因为它已经开发了一段时间。不过在本周 Hacker News 上风头十足&#xff0c;DreamBerd 除了有点意思的改 ; 分隔符为 !&#xff0c;之外&#xff0c;它还能让你用问号来标注一段你也不确定…

通过adb获取ANR日志

1、命令行输入&#xff1a;adb bugreport 2、等待日志下载完毕&#xff0c;解压bugreport文件 3、进入FS-->data-->anr

【架构治理工具】在代码存储库中记录软件架构

Markdown 是一种标准的简单语法&#xff0c;用于创建具有专业外观的文档。它比 HTML 更简单&#xff0c;无需专门的编写编辑器即可进行管理。Git配置管理工具也支持markdown格式。在 Git 环境中&#xff0c;markdown 一般用于项目的简单介绍和构建说明。&#xff08;自述文件&a…

CSS 渐变

CSS 渐变 01 CSS 渐变基础 颜色的几种表示 渐变的几种方式 02 特殊的渐变举例 水平渐变 垂直渐变&#xff08;矩形四个点三种颜色&#xff09; 线性渐变只能在一个方向上渐变&#xff0c;要想实现这种渐变&#xff0c;可以使用两个标签进行叠加&#xff1a;一个负责水平…

npm运行没反应的问题

npm 遇到的问题 我们在经常切换node版的时候会遇到npm命令失效的问题。 我们不管运行npm的什么命令都是一闪然后就没有任何输出&#xff0c;效果如下&#xff1a; 主要原因是因为npm config set prefix 改包的路径出问题了 解决方法是&#xff1a;打开系统盘找到下列目录&am…

水力发电在可再生能源中的地位和潜力

可再生能源的发展已成为全球能源领域的重要趋势&#xff0c;而作为最古老、最成熟的可再生能源形式之一&#xff0c;水力发电在能源供应和环境保护方面发挥着重要作用。本文将深入探讨水力发电在可再生能源中的地位和潜力&#xff0c;包括其技术特点、发展趋势以及面临的挑战和…

多线程/std::thread线程退出方式详解

文章目录 概述不 join 也不 detach执行了detach并不能万事大吉建议使用 join 函数 概述 这里默认你已经了解 std::thread 类的基本使用&#xff0c;和WinAPI多线程编程中 “如何优雅的退出线程” 等相关知识。阅读该文前&#xff0c;建议先看看《多线程 /C 11 std::thread 类深…

考场作弊行为自动抓拍告警算法 yolov7

考场作弊行为自动抓拍告警系统通过yolov7python网络模型算法&#xff0c;考场作弊行为自动抓拍告警算法实时监测考场内所有考生的行为&#xff0c;对考生的行为进行自动抓拍&#xff0c;并分析判断是否存在作弊行为。YOLOv7 的发展方向与当前主流的实时目标检测器不同&#xff…

ChatGLM2本地部署的实战方案

大家好,我是herosunly。985院校硕士毕业,现担任算法研究员一职,热衷于机器学习算法研究与应用。曾获得阿里云天池比赛第一名,CCF比赛第二名,科大讯飞比赛第三名。拥有多项发明专利。对机器学习和深度学习拥有自己独到的见解。曾经辅导过若干个非计算机专业的学生进入到算法…

PHP wangEditor插件打包(包含公式、上传附件)完整版

注意&#xff1a;js,css文件引用路径需要修改 先看效果 index.html文件 <!-- 新版编辑器 --> <script type"text/javascript" src"js/editor/dist/index.js"></script> <link href"js/editor/dist/css/style.css" rel&qu…

Mysql_5.7下载及安装(CentOS7)

文章目录 安装MySQL的几种方式一、 使用docker安装MySQL1.1 卸载旧版本&#xff08;如果存在docker&#xff0c;需先卸载旧版本&#xff09;1.2 安装Docker使用存储库安装(推荐使用) 1.3 安装mysql5.7.35(普通用户下)*** 安装MySQL:5.7.35镜像*** 进入容器中查看配置文件以及数…