Ant Design of Vue表格点击行与操作单元格冲突（如删除行操作）

问题

使用使用Ant Design of Vue的Table组件，实现点击某一行，出现这一行的详情弹窗，由于表格中也有其他操作（如编辑或者删除），其他操作也会执行点击行的操作

原因

事件冒泡，点击编辑或者删除的时候，点击事件冒泡到父表格行，触发了父表格行的点击事件，才会出现上面的问题

<template>
<div class="tas_listsecc">
  <div style="margin-top: 2px; position: absolute; top: -8px; left: 86px;">
    <a-button
      class="editable-add-btn"
      @click.stop="handleAdd"
      style="color: #1890ff;"
    >
      + 新建任务
    </a-button>
  </div>

  <a-table
    bordered
    :data-source="dataSource"
    :columns="columns"
    :pagination="{ pageSize: 12 }"
    @change="handleChange"
    :customRow="rowClick"
    size="small"
  >
    <template v-for="col in ['name']" #[col]="{ text, record }" :key="col">
      <div>
        <a-input
          v-if="record.editable == true"
          placeholder="请输入任务名称"
          v-model:value="record.name"
          style="margin: -5px 0; width: 400px;"
        />
        <template v-else>
          {{ text }}
        </template>
      </div>
    </template>
    <template v-for="col in ['state']" #[col]="{ text, record }" :key="col">
      <div class="t_name">
        <span
          :class="[
            { activeone: record.state == '待处理' },
            { activetwo: record.state == '待审核' },
            { activethree: record.state == '进行中' },
            { activefour: record.state == '已完成' },
            { activefive: record.state == '已归档' },
          ]"
        >
          {{ text }}
        </span>
        <span
          class="pointer sta_span"
          v-if="record.editable == false && record.state != ''"
          @click.stop="chocClick(record)"
        >
          <DownCircleOutlined
            v-show="record.choabtn == false"
            :style="{ fontSize: '14px', color: '#08c' }"
          />
          <UpCircleOutlined
            v-show="record.choabtn == true"
            :style="{ fontSize: '14px', color: '#52C41A' }"
          />
        </span>
        <div class="cho_card" v-show="record.choabtn == true">
          <p
            class="chcos pointer"
            @click.stop="chocurrent(record, index)"
            v-for="(item, index) of kardList"
            :key="index"
            :class="{ active: chosindex === index }"
          >
            {{ item }}
            <span style="margin-left: 100px; color: white;">
              <CheckOutlined />
            </span>
          </p>
        </div>
      </div>
    </template>
    <template #distributor="{text,record}">
      <div v-if="record.editable == false">
        <span><a-avatar :size="24" :src="record.imgHeader" /></span>
        {{ text }}
      </div>
    </template>

    <template v-for="col in ['project']" #[col]="{ text, record }" :key="col">
      <div>
        <a-select
          v-if="record.editable == true"
          v-model:value="record.project"
          style="width: 100%;"
          @focus="focus"
          ref="select"
          @change="selehandleChange"
        >
          <a-select-option value="jack">Jack</a-select-option>
          <a-select-option value="lucy">Lucy</a-select-option>
          <a-select-option value="Yiminghe">yiminghe</a-select-option>
        </a-select>
        <template v-else>
          {{ text }}
        </template>
      </div>
    </template>
    <template v-for="col in ['executor']" #[col]="{ text, record }" :key="col">
      <div>
        <span style="margin-right: 4px;">
          <a-avatar
            :size="24"
            v-if="record.editable == false"
            :src="record.imgHeader"
          />
        </span>
        <a-select
          v-if="record.editable == true"
          style="width: 100%;"
          @focus="focus"
          v-model:value="record.executor"
          ref="select"
          @change="selehandleChange"
        >
          <a-select-option value="jack">Jack</a-select-option>
          <a-select-option value="lucy">Lucy</a-select-option>
          <a-select-option value="Yiminghe">yiminghe</a-select-option>
        </a-select>
        <template v-else>
          {{ text }}
        </template>
      </div>
    </template>
    <template v-for="col in ['time']" #[col]="{ text, record }" :key="col">
      <div>
        <a-range-picker
          v-if="record.editable == true"
          v-model:value="record.time"
          format="YYYY-MM-DD"
          @change="onTimeChange"
          :placeholder="['开始日期', '结束日期']"
        ></a-range-picker>
        <template v-else>
          {{ text }}
        </template>
      </div>
    </template>
    <template #operation="{ record}">
      <div class="editable-row-operations">
        <span v-if="record.editable == true">
          <a style="margin-right: 10px;" @click.stop="save(record)">创建</a>
          <a-popconfirm
            title="确定取消此操作吗?"
            @confirm="editcancel(record.key)"
          >
            <a>取消</a>
          </a-popconfirm>
        </span>
        <!-- <span >
          <a @click="edit(record.key)">Edit</a>
        </span> -->
      </div>
      <a-popconfirm
        v-if="dataSource.length && record.editable == false"
        title="确定删除吗?"
        @confirm="onDelete(record.key)"
      >
        <a @click.stop="">删除</a>
      </a-popconfirm>
       <!-- <a>详情</a> -->
    </template>
  </a-table>
  </div>
</template>

点击行代码

 const rowClick = (record:any,index:number)=>{
      return{
        onClick:() =>{
          console.log(record,index)
        }
      }
    }

解决办法

既然是事件冒泡，那就阻止冒泡，vue中有事件修饰符可以解决。
给表格内部影响的事件添加stop修饰符

 @click.stop="chocClick(record)"

注意：删除的阻止冒泡要加在a-popconfirm内部

 <a-popconfirm
        v-if="dataSource.length && record.editable == false"
        title="确定删除吗?"
        @confirm="onDelete(record.key)"
      >
        <a @click.stop="">删除</a>
      </a-popconfirm>