el-select的el-option添加操作按钮插槽后实现勾选与按钮操作分离_el-option插槽-程序员宅基地

技术标签: elementui  前端  vue.js  javascript  

 这里我在el-option的选项文字后面添加了两个svg按钮(编辑和删除):如图

当我们点击el-option时无法区分是勾选el-option还是点击了el-option选项文字后面的按钮,其实只要在后面的编辑和删除的操作按钮的click事件上面添加.native.stop即可阻止事件冒泡,实现勾选与操作分离------点击操作按钮区域外为勾选,点击操作按钮即操作

见以下代码

                      <el-option v-for="item in dataResourceOptions" :key="item.value" :label="item.label" :value="item.value" >
                        <template #default>
                          <div class="flex items-center justify-between">
                            <div class="flex items-center gap-5">
                              <div class="flex items-center w-18">
                                <app-svg-icon icon-name="check" class="w-18 h-18"></app-svg-icon>
                              </div>
                              <span>{
   { item.label }}</span>
                            </div>
                            <div class="flex items-center gap-5">
                              <div class="w-25 h-25 flex items-center pl-5 option-operation-button" @click.native.stop="handleFieldItemClick(item,'编辑')"><app-svg-icon icon-name="pencil" class="w-16 h-16"></app-svg-icon></div>
                              <div  class="w-25 h-25 flex items-center pl-5 option-operation-button" @click.native.stop="handleFieldItemClick(item,'删除')"><app-svg-icon icon-name="x-close" class="w-16 h-16"></app-svg-icon></div>
                            </div>
                          </div>
                        </template>
                      </el-option>

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/weixin_60886885/article/details/133772227

智能推荐

近世代数--特征--环的特征,域的特征-程序员宅基地

文章浏览阅读8k次,点赞8次,收藏23次。近世代数--特征--环的特征,域的特征博主是初学近世代数(群环域),本意是想整理一些较难理解的定理、算法,加深记忆也方便日后查找;如果有错,欢迎指正。我整理成一个系列:近世代数,方便检索。..._环的特征

Ubuntu22.04安装Nvidia 550驱动和CUDA toolkit 12.4.1

4. 验证CUDA toolkit 12.4.1安装成功。3. 为CUDA12.4在.bashrc中添加环境变量。

清除input输入框的缓存_chromeinput同name清理缓存-程序员宅基地

文章浏览阅读2.3k次。有过表单设计经验的朋友肯定知道,当我们在浏览器中输入表单信息的时候,往往input文本输入框会记录下之前提交表单的信息,以后每次只要双击 input文本输入框就会出现之前输入的文本,这样有时会觉得比较方便,但有时也会暴露用户的隐藏数据,那么如何让input表单输入框不记录输入过信息的方法呢?方法一: 在不想使用缓存的input中添加 autocomplete=“off”例如:名字:<input type="text" name="FirstName" value="" autocomplete=_chromeinput同name清理缓存

Java知识总结-基础

** * 外部内、内部类 */ public class Outer { public static IAnimal getInnerInstance(String speak){ return new IAnimal(){ @Override public void speak(){ System.out.println(speak);当程序第一次引用该类的静态成员时,就会触发这个类的加载。

Apache Kylin Buid Cube详细流程_kylin buid cuboid的时候每一步都要等待2分钟-程序员宅基地

文章浏览阅读506次。Build Cube流程主要分为四个阶段:根据用户的cube信息计算出多个cuboid文件根据cuboid文件生成htable更新cube信息回收临时文件1.流程一:作业整体描述把构建Cube的来源表总行数写到指定的HDFS文件中2.流程二:生成中间临时数据这一步的操作是根据Cube设计中的定义生成原始数据,这里会新创建一个Hive外部表,然后再_kylin buid cuboid的时候每一步都要等待2分钟

团队管理视角-程序员宅基地

文章浏览阅读779次。一个管理者要带团队有三重视角:第一个视角是管理者,第二个视角是教练员,第三个视角是指挥员。管理者视角管理者视角,最常规的视角。比如效率和质量如何衡量?如何分解和分配任务?项目进展怎么样了?进度怎么估算?有没有瓶颈,瓶颈在哪?根因是什么?绩效怎么考核?而今天我们要讨论的是管理者的首要目标——求生存。如果一个团队在公司里没有价值了,那么整个团队都会被裁掉。所以,作为管理者最重要的是先能生存下来,证明自己是能胜任的,然后证明自己的团队是能胜任的。证明自己理解何为胜任,就是领导布置任.._管理视角

随便推点

短视频交友系统搭建重点,会用到哪些三方服务?

在搭建短视频交友系统时,需要根据实际需求选择合适的第三方服务,并与这些服务提供商建立良好的合作关系,确保服务的稳定性和可靠性。在搭建短视频交友系统时,为了确保系统的稳定性、安全性和用户体验,通常需要用到多种第三方服务。可以选择云存储服务,如阿里云OSS、腾讯云COS等,它们提供高可靠性、高扩展性的存储解决方案。:如阿里云、腾讯云等,提供稳定、可扩展的服务器资源,确保短视频交友系统能够应对高并发和大规模用户访问。:根据用户的观看历史、兴趣偏好等信息,为用户推荐合适的短视频和交友对象,提升用户体验和留存率。

单片机毕业设计 stm32宠物自动喂食系统_基于stm32单片机宠物自动喂食设计-程序员宅基地

文章浏览阅读2.8k次,点赞5次,收藏95次。Hi,大家好,学长今天向大家介绍一个 单片机项目基于stm32的宠物自动喂食系统大家可用于 课程设计 或 毕业设计该传感器模块对环境光线适应能力强, 其具有一对红外线发射与接收管, 发射管发射出一定频率的红外线, 当检测方向遇到障碍物时, 红外线反射回来被接收管接收,经过比较器电路处理之后, 绿色指示灯会亮起, 同时信号输出接口输出数字信号(一个低电平信号) , 可通过电位器旋钮调节检测距离, 有效距离范围 2~30cm, 工作电压为 3. 3V-5V。实物图如。_基于stm32单片机宠物自动喂食设计

iOS-html调起APP并传参_html ios拉起第三方app-程序员宅基地

文章浏览阅读5.7k次。前一段时间要做一个html页面调起APP应用的需求,特记下研究成果 1、在项目info.plist中添加URL Types以供html调用 2、在html中调用 支付页面 var_html ios拉起第三方app

信息安全风险评估---矩阵法计算风险_威胁程度计算-程序员宅基地

文章浏览阅读1.6w次,点赞16次,收藏29次。 矩阵法计算风险假设:有以下信息系统中资产面临威胁利用脆弱性的情况:共有两项重要财产:资产A1和资产A2;资产A1面临一个主要威胁T1;资产A2面临两个主要威胁T2,T3;威胁T1可以利用资产A1存在的两个..._威胁程度计算

《SoC设计方法与实现》(1)_soc设计方法与实现 epub-程序员宅基地

文章浏览阅读347次。SOC(System On Chip)即系统级芯片,又称片上系统,其将系统的主要功能综合到一块芯片中,本质上是在做一种复杂的IC设计。现在的SOC芯片上可整体实现CPU、DSP、数字电路、模拟电路、存储器、片上可编程逻辑阵列等多种电路,综合实现图像处理、语音处理、通信协议、通信机能、数据处理等功能。SOC的优势有:可以实现更为复杂的系统、具有较低的设计成本、具有更高的可靠性、缩短产品设计时间、减少产品反复的次数、可以满足更小尺寸的设计要求、可达到低功耗的设计要求。_soc设计方法与实现 epub

Linux内核模块动态添加方法_linux 将moudle动态加入内核-程序员宅基地

文章浏览阅读391次。Linux内核模块动态添加方法 今天下午通过一番折腾,终于琢磨除了Linux内核模块的动态加载方法,网上大部分教程基于旧版本做的,有很多地方不一样,走了很多弯路,不过最后终于成功了,方法如下:1、建立C++源文件,假设文件目录为path,文件名为hello.c源代码如下:#include #include