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>

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

相关推荐
ai小鬼头1 小时前
百度秒搭发布:无代码编程如何让普通人轻松打造AI应用?
前端·后端·github
漂流瓶jz1 小时前
清除浮动/避开margin折叠:前端CSS中BFC的特点与限制
前端·css·面试
前端 贾公子1 小时前
在移动端使用 Tailwind CSS (uniapp)
前端·uni-app
散步去海边1 小时前
Cursor 进阶使用教程
前端·ai编程·cursor
清幽竹客1 小时前
vue-30(理解 Nuxt.js 目录结构)
前端·javascript·vue.js
知性的小mahua1 小时前
echarts+vue实现中国地图板块渲染+省市区跳转渲染
vue.js
weiweiweb8881 小时前
cesium加载Draco几何压缩数据
前端·javascript·vue.js
幼儿园技术家1 小时前
微信小店与微信小程序简单集成指南
前端
我不吃饼干9 天前
鸽了六年的某大厂面试题:你会手写一个模板引擎吗?
前端·javascript·面试
涵信9 天前
第一节 布局与盒模型-Flex与Grid布局对比
前端·css