问题:我点击操作列维护的时候 触发到行点击事件中,导致页面跳转不正确
百度原因:
-
事件冒泡:在 Vue 中,事件默认是会冒泡的。当你点击某个操作列按钮时,事件会从该元素冒泡到它的父元素。如果
el-table
的@row-click
被监听,它会捕获到这一冒泡事件并触发对应的处理方法。 -
操作列是表格行的一部分:在
el-table
中,操作列作为el-table-column
的一部分,表格中的所有列本质上都是表格行 (<tr>
) 的子元素。即使你点击操作列的按钮,这个点击仍然会被认为是“点击了行”本身,所以会触发row-click
。
解决方法: 我是添加了.stop 阻止事件冒泡
<el-table-column label="操作" align="center"><template #default="scope"><a class="edit-btn" @click.stop="handleEditView(scope.row)">{{ '维护' }}</a></template></el-table-column>
这样就跳转到正确的页面了