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

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

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

javascript 复制代码
<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 上就行了

javascript 复制代码
<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>

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

相关推荐
玲小珑2 分钟前
Next.js 教程系列(十九)图像优化:next/image 与高级技巧
前端·next.js
晓得迷路了3 分钟前
栗子前端技术周刊第 91 期 - 新版 React Compiler 文档、2025 HTML 状态调查、Bun v1.2.19...
前端·javascript·react.js
江城开朗的豌豆9 分钟前
Vue和React中的key:为什么列表渲染必须加这玩意儿?
前端·vue.js·面试
江城开朗的豌豆15 分钟前
前端路由傻傻分不清?route和router的区别,看完这篇别再搞混了!
前端·javascript·vue.js
pengzhuofan18 分钟前
Web开发系列-第0章 Web介绍
前端
小鱼人爱编程27 分钟前
Java基石--反射让你直捣黄龙
前端·spring boot·后端
JosieBook2 小时前
【web应用】如何进行前后端调试Debug? + 前端JavaScript调试Debug?
前端·chrome·debug
LBJ辉2 小时前
2. Webpack 高级配置
前端·javascript·webpack
灵感__idea8 小时前
JavaScript高级程序设计(第5版):好的编程就是掌控感
前端·javascript·程序员
烛阴10 小时前
Mix
前端·webgl