问题
使用使用Ant Design of Vue的Table组件，实现点击某一行，出现这一行的详情弹窗，由于表格中也有其他操作（如编辑或者删除），其他操作也会执行点击行的操作
原因
事件冒泡，点击编辑或者删除的时候，点击事件冒泡到父表格行，触发了父表格行的点击事件，才会出现上面的问题
<template><div class="tas_listsecc"><div style="margin-top: 2px; position: absolute; top: -8px; left: 86px;"><a-buttonclass="editable-add-btn"@click.stop="handleAdd"style="color: #1890ff;">+ 新建任务</a-button></div><a-tablebordered: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-inputv-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><spanclass="pointer sta_span"v-if="record.editable == false && record.state != ''"@click.stop="chocClick(record)"><DownCircleOutlinedv-show="record.choabtn == false":style="{ fontSize: '14px', color: '#08c' }"/><UpCircleOutlinedv-show="record.choabtn == true":style="{ fontSize: '14px', color: '#52C41A' }"/></span><div class="cho_card" v-show="record.choabtn == true"><pclass="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-selectv-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-selectv-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-pickerv-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-popconfirmtitle="确定取消此操作吗?"@confirm="editcancel(record.key)"><a>取消</a></a-popconfirm></span><!-- <span ><a @click="edit(record.key)">Edit</a></span> --></div><a-popconfirmv-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-popconfirmv-if="dataSource.length && record.editable == false"title="确定删除吗?"@confirm="onDelete(record.key)"><a @click.stop="">删除</a></a-popconfirm>
