一、事情的起因
表格里有勾选框，还有操作按钮，如下图
等功能开发完后，需求临时说要加一个行点击也能选中的功能，
心想，加就加呗，直接一个梭哈，在el-table表格里加上
@row-click="handleRowClick"， 然后就提交了
功能倒是能用，就是点击按钮的时候也触发了，果不其然被测试打回重写（狗头）
二、事情的经过
一开始，我想着通过row-click的参数来做区分，因为row-click的默认参数有row, column, event这三个，其中column就可以拿到点击时候，鼠标所在的列（column.property就是这一列绑定的数值项，用其他也可以），根据这个，倒是修复了点击按钮，也会触发row-click函数的bug。
但还是差点意思，因为上述方法，会将操作按钮那一整列都划分为不触发row-click函数的区域，如果鼠标在这区域里，但不在按钮上，就触发不了任何函数，用户体验感还是有点差强人意。
于是乎，我把目光放到了修饰符上，因为这种重复触发，无非就是冒泡了，如果能阻止事件的冒泡，那应该也可以达到目的。
用.stop修饰符就可以实现效果了。
所以就有了第三步
三、修饰符
1、事件修饰符
.native修饰符
在组件标签上使用的时候，就要加上native修饰符，这样就可以像原生标签一样使用了。
原生标签，则不允许添加该修饰符。element组件也可以用。
.stop修饰符
阻止事件继续传播，也就是阻止冒泡了。
.prevent修饰符
阻止标签的默认行为，比如a标签的自动跳转，form标签中的submit按钮（如果form没
有submit事件，那第一个不是type为button的按钮，也会触发这个自动刷新），自动
刷新网页，网页右键单机，弹出的默认菜单。
.capture修饰符
使用事件捕获模式,即元素自身触发的事件先在此处处理，然后才交由内部元素进行处理。
简单的讲，就是加了.capture修饰符的，会先优先处理这个标签的事件，不管它里面是否还
包含了其他标签。
.once修饰符
事件只触发一次。
.self修饰符
只有在`点击事件绑定的元素`与`当前被点击元素`一致时才触发点击事件。
.passive修饰符
告诉浏览器不阻止事件的默认行为，尽早告诉，可有效提供移动端性能。
使用修饰符时，顺序很重要；相应的代码会以同样的顺序产生。
举个例子：
用v-on:click.prevent.self会阻止所有的点击，
而 v-on:click.self.prevent 只会阻止对元素自身的点击。
复制代码2、v-model的修饰符
.lazy修饰符
常用在input框,使用后，只有当input框失去焦点or用户回车了，才会修改同步数据，
应用场景，避免每次输入都会和后台数据绑定的情况。
.number修饰符
当用户在input中输入数字时，浏览器会默认将输入的数字转化为string类型，使用
number修饰符来将输入的数字转为number类型。
.trim修饰符
用户可能输入的字符串中含有空格，这样系统在处理时可能会出现错误。使用trim
修饰符来去掉字符串首部或者尾部的所有空格。
复制代码3、键盘事件修饰符
@keyup.enter 可以捕获回车键事件
.tab 制表符事件
.delete (捕获“删除”和“退格”键)
.esc esc事件
.space 空格事件
.up 上下左右事件
.down
.left
.right
特殊的修饰键
.ctrl
.alt
.shift
.meta
<!-- 按下Alt + 释放C触发 -->
<input @keyup.alt.67="clear">
<!-- 按下Alt + 释放任意键触发 -->
<input @keyup.alt="other">
<!-- 按下Ctrl + enter时触发，“在十进制下，回车键ASCII码为“13” -->
<input @keydown.ctrl.13="submit">
复制代码ps：又可以水一篇
作者：地霊殿__三無
链接：https://juejin.cn/post/7124650150261161992
来源：稀土掘金
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。 标签：el,恶补,修饰符,点击,事件,按钮,click,row From： https://www.cnblogs.com/Earth-Hall-Sanwu/p/16657389.html