Element Plus阻止 el-dropdown、el-switch等冒泡事件

最近做vue3项目,使用Element Plus,又遇到坑了!

问题点:组件中遇到事件冒泡问题了,el-checkbox 中 @change事件要求阻止冒泡,如下代码中要求点击checkbox时不调用li标签的show方法

javascript 复制代码
<li @click="show()">
    <div>li内容</div>
    <div>
       <el-checkbox
        @change="(val)=>handleCheckTower(val,item)"
        v-model="item.showCft"
        >测风塔</el-checkbox>
    </div>
</li>

使用vue3的事件修饰符报错

在el-checkbox 中用 @change.stop 发现不起作用,报错,没有相关方法,坑死

最后取巧方法:

给元素包一层父元素,父元素上使用@click.stop,阻止事件冒泡

javascript 复制代码
<li @click="show()">
    <div>li内容</div>
    <div @click.stop>
       <el-checkbox
        @change="(val)=>handleCheckTower(val,item)"
        v-model="item.showCft"
        >测风塔</el-checkbox>
    </div>
</li>

其他el组件也一样处理

相关推荐
967713 小时前
初始web server的认识1---webserver的用途和工作流程
前端
叫我:松哥14 小时前
基于神经网络算法的多模态内容分析系统,采用Flask + Bootstrap + ECharts + LSTM-CNN + 注意力机制
前端·神经网络·算法·机器学习·flask·bootstrap·echarts
vx_bisheyuange14 小时前
基于SpringBoot的知识竞赛系统
大数据·前端·人工智能·spring boot·毕业设计
搂着猫睡的小鱼鱼14 小时前
签名逆向与浏览器自动化 / 动态渲染抓取京东评论信息
前端·javascript·自动化
凯新生物14 小时前
Mannose-PEG-CY5.5,CY5.5-PEG-Mannose技术手册:分子量选型与溶解性说明
javascript·c#·bash·symfony
wangbing112514 小时前
ES6 (ES2015)新增的集合对象Set
前端·javascript·es6
nvd1114 小时前
企业级 LLM 实战:在受限环境中基于 Copilot API 构建 ReAct MCP Agent
前端·copilot
+VX:Fegn089514 小时前
计算机毕业设计|基于springboot + vue校园实验室管理系统(源码+数据库+文档)
数据库·vue.js·spring boot·后端·课程设计
Dragon Wu14 小时前
TailWindCss cva+cn管理样式
前端·css
烤麻辣烫15 小时前
Web开发概述
前端·javascript·css·vue.js·html