click.stop 阻止点击事件继续传播
场景:
在table中使用,点击当前行,当前行被勾选,但是点击当前行中按钮或点击事件时,使用此方法,则在触发当前点击事件后,阻止行的选中事件
使用:
html
<el-table ref="tableRef" :data="tableData" :row-key="row => { return row.id}" @selection-change="handleSelectionChange">
<el-table-column
width="50"
align="center"
type="selection">
</el-table-column>
<el-table-column label="操作">
<template slot-scope="scope">
<el-button
v-hasFSS="'rkcjgl-table-caoZuoJiLu'"
icon="el-icon-stopwatch"
type="text"
style="padding:0;"
@click.stop="openCzjl(scope.row)"
>操作记录</el-button>
</template>
</el-table-column>
</el-table>
页面效果:
参考地址:
vue @click.native和@click.stop和@click.self_前端技术的学习整理-CSDN博客_@click.stop参考一:vue @click.native 原生点击事件:1,给vue组件绑定事件时候,必须加上native ,不然不会生效(监听根元素的原生事件,使用.native修饰符)2,等同于在自组件中: 子组件内部处理click事件然后向外发送click事件:$emit("click".fn)参考二:在事件处理器中经常需要调用event.preventDefault()...https://blog.csdn.net/weixin_41646716/article/details/90069562