IE浏览器兼容性问题——el-button点击失效

news2024/11/20 19:27:11

el-table 中经常有这种场景:最后一列是操作,只有一个图标

 之前的实现是直接讲点击事件绑定到了 icon 图标上,这样在谷歌、edge、火狐等是没问题的,但是在ie浏览器下,就会出现点击事件无效的情况,点击后不会触发点击事件。

<template v-slot:operation="slotData">
    <el-tooltip class="item" effect="dark" content="恢复" placement="top">
        <el-button type="text" size="small" v-preventReClick>
            <i class="el-icon-refresh-left" @click="recoveryFunc(slotData.data)"></i>
        </el-button>
    </el-tooltip>
    <el-tooltip class="item" effect="dark" content="删除" placement="top">
        <el-button type="text" size="small" v-preventReClick>
            <i class="el-icon-delete" @click="deletePhysicalDirFileFuncOne(slotData.data)"></i>
        </el-button>
    </el-tooltip>
</template>

解决方案:将点击事件绑定到 el-button 上就行了

<template v-slot:operation="slotData">
    <el-tooltip class="item" effect="dark" content="恢复" placement="top">
        <el-button type="text" size="small" @click="recoveryFunc(slotData.data)" v-preventReClick>
            <i class="el-icon-refresh-left"></i>
        </el-button>
    </el-tooltip>
    <el-tooltip class="item" effect="dark" content="删除" placement="top">
        <el-button type="text" size="small" @click="deletePhysicalDirFileFuncOne(slotData.data)" v-preventReClick>
            <i class="el-icon-delete"></i>
        </el-button>
    </el-tooltip>
</template>

如果帮助到您了,可以留下一个赞👍告诉我

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

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

相关文章

使用minikube安装使用单机版K8S(docker)

前置&#xff1a;作为一个开发&#xff0c;工作之余想玩一下k8s&#xff0c;但是搭建成本太高&#xff0c;所以就找到了minikube这个工具&#xff0c;快速搭建单机版k8s&#xff0c;下面是个人搭建流程&#xff0c;基于centos7&#xff0c;仅供参考。 1.下载kubectl&#xff0…

Idea2023创建Servlet项目

① Java EE 只是一个抽象的规范&#xff0c;具体实现称为应用服务器。 ② Java EE 只需要两个包 jsp-api.jar 和 servlet-api.jar&#xff0c;而这两个包是没有官方版本的。也就是说&#xff0c;Java 没有提供这两个包&#xff0c;只提供了一个规范。那么这两个包是谁提供的…

【Linux多线程】信号量以及线程池

【Linux多线程】信号量以及线程池 目录 【Linux多线程】信号量以及线程池POSIX信号量基于环形队列的生产者消费者模型 线程池 作者&#xff1a;爱写代码的刚子 时间&#xff1a;2024.4.2 前言&#xff1a;本篇博客将会介绍Linux线程中的信号量以及线程池&#xff0c;完善生产者…

elementui 实现一个固定位置的Pagination(分页)组件

系列文章目录 一、elementui 导航菜单栏和Breadcrumb 面包屑关联 二、elementui 左侧导航菜单栏与main区域联动 三、elementui 中设置图片的高度并支持PC和手机自适应 四、 elementui 实现一个固定位置的Pagination&#xff08;分页&#xff09;组件 文章目录 系列文章目录…

Python基于深度学习的人脸识别项目源码+演示视频,利用OpenCV进行人脸检测与识别 preview

​ 一、原理介绍 该人脸识别实例是一个基于深度学习和计算机视觉技术的应用&#xff0c;主要利用OpenCV和Python作为开发工具。系统采用了一系列算法和技术&#xff0c;其中包括以下几个关键步骤&#xff1a; 图像预处理&#xff1a;首先&#xff0c;对输入图像进行预处理&am…

深入剖析主机安全中的零信任机制及其实施原理

引言 在数字化转型加速与云端服务普及的大背景下&#xff0c;传统依赖边界的网络安全模式逐渐显露出其局限性。面对愈发复杂多变的威胁环境&#xff0c;零信任安全架构作为新一代的安全范式应运而生&#xff0c;尤其是在主机层面的安全实践中&#xff0c;零信任机制正扮演着至…

RabbitMQ3.x之七_RabbitMQ消息队列模型

RabbitMQ3.x之七_RabbitMQ消息队列模型 文章目录 RabbitMQ3.x之七_RabbitMQ消息队列模型1. RabbitMQ消息队列模型1. 简单队列2. Work Queues(工作队列)3. Publish/Subscribe(发布/订阅)4. Routing(路由)5. Topics(主题)6. RPC(远程过程调用)7. Publisher Confirms(发布者确认) …

防止推特Twitter账号被冻结,应该选什么代理类型IP?

在处理多个 Twitter 帐号时&#xff0c;选择合适的代理IP对于避免大规模帐户暂停至关重要。现在&#xff0c;问题出现了&#xff1a;哪种类型的代理是满足您需求的最佳选择&#xff1f;下面文章将为你具体讲解推特账号冻结原因以及重点介绍如何选择代理IP。 一、推特账号被冻结…

C# WPF编程-命令

C# WPF编程-命令 概述WPF命令模型ICommand接口RoutedCommand类RoutedUICommand类命令库 概述 使用路由事件可以响应广泛的鼠标和键盘事件&#xff0c;这些事件是低级的元素。在实际应用程序中&#xff0c;功能被划分成一些高级的任务。这些任务可通过各种不同的动作和用户界面…

如何借助API实现自动化商品采集商品,自营商城选品上货搜索无货源模式

借助API实现自动化商品采集、自营商城选品上货以及搜索无货源模式&#xff0c;通常需要以下步骤&#xff1a; 请求示例&#xff0c;API接口接入Anzexi58 确定数据源&#xff1a; 首先&#xff0c;你需要确定你的商品数据来源。这可能是其他电商平台、供应商网站、数据提供商等…

Spark 的结构化 APIs——RDD,DataFrame, Dataset, SparkSQL 使用和原理总结

文章目录 前言RDD的底层是什么?结构化 Spark主要优点和好处 DataFrame APISpark的基本数据类型Spark的结构化和复杂数据类型Schemas 和创建 DataFramesColumns 和 ExpressionsRows通用的 DataFrame 算子 The Dataset API有类型 Objects、无类型 Objects 和通用 Rows创建 Datas…

Express框架搭建项目 node.js

文章目录 引言Express框架介绍express安装环境准备写一个简单的项目展示 文章总结 引言 Express是一个基于Node.js平台的轻量级Web应用框架&#xff0c;它提供了简洁的API和丰富的功能&#xff0c;使得开发者能够快速地构建Web服务器和API。本文将带领大家从零开始&#xff0c…

【教程】MySQL数据库学习笔记(四)——数据操作语言DML(持续更新)

写在前面&#xff1a; 如果文章对你有帮助&#xff0c;记得点赞关注加收藏一波&#xff0c;利于以后需要的时候复习&#xff0c;多谢支持&#xff01; 【MySQL数据库学习】系列文章 第一章 《认识与环境搭建》 第二章 《数据类型》 第三章 《数据定义语言DDL》 第四章 《数据操…

小程序滑动删除组件+全选批量删除组件+附源码

小程序滑动删除组件全选批量删除组件附源码 说明 使用 uni-app、uview 组件开发&#xff0c;全端&#xff08;微信小程序、QQ小程序、抖音小程序等等&#xff09; 支持滑动删除组件、支持左滑删除、长按进入批量删除、全选删除、长按弹窗删除、 组件式开发&#xff0c;文章…

【MATLAB源码-第176期】基于matlab的16QAM调制解调系统频偏估计及补偿算法仿真,对比补偿前后的星座图误码率。

操作环境&#xff1a; MATLAB 2022a 1、算法描述 在通信系统中&#xff0c;频率偏移是一种常见的问题&#xff0c;它会导致接收到的信号频率与发送信号的频率不完全匹配&#xff0c;进而影响通信质量。在调制技术中&#xff0c;QPSK&#xff08;Quadrature Phase Shift Keyin…

在ChatGPT中,能用DALL·E 3编辑图片啦!

4月3日&#xff0c;OpenAI开始向部分用户&#xff0c;提供在ChatGPT中的DALLE 3图片编辑功能。 DALLE 3是OpenAI在2023年9月20日发布的一款文生图模型&#xff0c;其生成的图片效果可以与Midjourney、leonardo、ideogram等顶级产品媲美&#xff0c;随后被融合到ChatGPT中增强其…

电脑上音频太多,播放速度又不一致,如何批量调节音频播放速度?

批量调节音频速度是现代音频处理中的一个重要环节&#xff0c;尤其在音乐制作、电影剪辑、有声书制作等领域&#xff0c;它能够帮助制作者快速高效地调整音频的播放速度&#xff0c;从而满足特定的制作需求。本文将详细介绍批量调节音频速度的方法、技巧和注意事项&#xff0c;…

软件杯 深度学习YOLO抽烟行为检测 - python opencv

文章目录 1 前言1 课题背景2 实现效果3 Yolov5算法3.1 简介3.2 相关技术 4 数据集处理及实验5 部分核心代码6 最后 1 前言 &#x1f525; 优质竞赛项目系列&#xff0c;今天要分享的是 &#x1f6a9; 基于深度学习YOLO抽烟行为检测 该项目较为新颖&#xff0c;适合作为竞赛课…

CentOS 镜像下载

CentOS 镜像下载&#xff1a;https://www.centos.org/download/ 选择合适的架构&#xff0c;博主选择x86_64&#xff0c;表示CentOS7 64位系统x86架构&#xff0c;如下&#xff1a; 或者直接访问以下网站下载 清华大学开源软件镜像站&#xff1a;https://mirrors.tuna.tsin…

c语言--联合体(声明、特点、计算)

目录 一、联合体类型的声明二、 联合体的特点三、 相同成员的结构体和联合体对比四、 联合体大小的计算 一、联合体类型的声明 像结构体⼀样&#xff0c;联合体也是由⼀个或者多个成员构成&#xff0c;这些成员可以不同的类型。 但是编译器只为最大的成员分配足够的内存空间。…