Vue3 + TypeScript + Element Plus 表格行按钮不触发 row-click 事件、不触发勾选行，只执行按钮的 click 事件

点击表格行按钮不触发 row-click 事件、不触发勾选行，只执行按钮的 click 事件

点击第一行的【编辑】，第一行为当前选择行， 同时也勾选了复选框，也会执行 row-click 事件

原来的代码：

            <el-table-column label="操作" header-align="center" align="center" fixed="right" width="60"><template #default="scope"><el-button type="danger" size="default" text @click="onClick(scope.row.id)">编辑</el-button></template></el-table-column>

要相实现点击表格行按钮不触发 row-click 事件、不触发勾选行，只执行按钮的 click 事件

只需给click增加stop修饰符即可

修改后的代码：

            <el-table-column label="操作" header-align="center" align="center" fixed="right" width="60"><template #default="scope"><!-- 点击时使用 .stop 修饰符阻止事件冒泡，只会执行@click的事件逻辑，其他事件不会触发，如 @row-click="onTableRowClick" --><el-button type="danger" size="default" text @click.stop="onClick(scope.row.id)">编辑</el-button></template></el-table-column>

应用效果：

 

点击第一行的【编辑】，第一行为当前选择行， 不会勾选复选框，不会执行 row-click 事件