Vue中如何禁止点击表格首列TD时触发TR的跳转事件

算力阿峰

2026-10-7

实现方案

这里提供两种常用的实现方式，优先推荐第一种，改动最小最直观：

方案1：给首列TD添加点击事件阻止冒泡

Vue提供了事件修饰符.stop，作用是阻止当前元素的点击事件向上冒泡到父元素，这样点击首列的时候就不会触发TR绑定的跳转事件。
你只需要修改首列TD的代码，增加@click.stop属性即可：

<td 
  v-if="permissions.includes('view all opportunities')" 
  width="10"
  @click.stop
>
  <!-- 原有内容保持不变 -->
  <div class="iq-email-sender-info">
    <div class="iq-checkbox-mail">
      <div class="custom-control custom-checkbox">
        <!-- 额外优化：循环里的ID要动态绑定，避免所有复选框ID重复导致label点击异常 -->
        <input type="checkbox" class="custom-control-input" :id="`mail-${k}`">
        <label class="custom-control-label" :for="`mail-${k}`"></label>
      </div>
    </div>
  </div>
</td>

这个改动不会影响首列内部复选框的正常点击功能，只是阻止了事件向上传递给TR。

方案2：在跳转方法中判断事件源

如果你不想修改TD的属性，也可以在跳转方法中通过事件对象判断点击的是不是首列，符合条件就终止跳转：

首先修改TR的点击事件，把原生事件对象$event传入方法：

<tr
  v-for="(data, k) in tableData"
  :key="k"
  @click="viewOpportunity(k, data, $event)"
>

修改viewOpportunity方法的逻辑：

viewOpportunity(k, data, e) {
  // 获取点击位置最近的td元素
  const clickTd = e.target.closest('td')
  if (!clickTd) return
  // 判断当前点击的td是不是所在行的第一个td
  const isFirstCol = clickTd === clickTd.parentElement.firstElementChild
  // 首列点击直接返回，不执行跳转
  if (isFirstCol) return
  
  window.location.href = "/opportunity/" + data.id;
}