解决行点击与按钮点击冲突

最新推荐文章于 2023-02-03 11:15:38 发布

黄猿007

最新推荐文章于 2023-02-03 11:15:38 发布

阅读量1.2k

点赞数

分类专栏： vue 文章标签： vue html java jquery

本文链接：https://blog.csdn.net/qq_37354752/article/details/109154667

版权

本文介绍了一种解决HTML表格中行点击跳转与按钮点击冲突的方案。在实现行点击跳转时遇到点击按钮也触发跳转的问题，尝试了如event.stopPropagation()等方法无效。最终通过不让td继承tr的class，而是将tr的样式行为移到需要的td上，成功解决了冲突。

摘要由CSDN通过智能技术生成

解决行点击与按钮点击冲突

需求是我们在点击行的过程中，会跳转到另一个页面，但实现了行点击的同时，却出现了小问题，点击按钮的时候也会跳转到另一个页面。最开始的主要代码如下:

<template>
<table id="level1-table" class="table table-bordered table-hover">
          <thead>
          <tr>
            <th>route</th>
            <th>routenm</th>
            <th>routedesc</th>
            <th>routeflag</th>
            <th>routestat</th>
            <th>isnnum</th>
            <th>scrap_cnt_limit</th>
            <th>repmis_cnt_limit</th>
            <th class="operation">操作</th>
          </tr>
          </thead>
<tbody>
          <tr v-for="category in level1.slice((currentPage-1)*pagesize,currentPage*pagesize)" :key="category.route" @click="onClickLevel1(category)" :class="{'active' : category.route === active.route}">
            <td>{
   {
   category.route}}</td>
            <td>{
   {
   category.routenm}}</td>
            <td>{
   {
   category.routedesc}}</td>
            <td>{
   {
   category.routeflag}}</td>
            <td>{
   {
   category.routestat}}</td>
            <td>{
   {
   category.isnnum}}</td>
            <td>{
   {
   category.scrap_cnt_limit}}</td>
            <td>{
   {
   category.repmis_cnt_limit}}</td>
            <td class="operation">
              <div class="hidden-sm hidden-xs btn-group"></