【Antd】实现Table组件行点击，解决某一列不触发行点击

今天有个新需求，点击table行，执行一些操作。实现过程中遇到了：点击操作列、操作列内按钮会冒泡触发行点击。antd版本：1.7.8

一、解决方案 customRow

<a-table :customRow="handleClickRow" :data-source="data_list" :columns="columns" bordered rowKey="id" :scroll="{x:true}"><template slot="operation" slot-scope="text, record"><div><a @click.stop="handleAdd('edit', record)"> //阻止冒泡<a-icon type="edit" />编辑</a><a-popconfirm title="确认删除吗?" @confirm="onDelete(record)"><a @click.stop=""><a-icon type="delete" />删除</a></a-popconfirm><a @click.stop="handleAdd('look', record)"><a-icon type="eye" />查看</a></div></template>
</a-table>

methods: {//行点击handleClickRow(record, index){return {on: {click: () => { //行单击console.log(record, index)}}}},
}

 事件汇总：

1、click 行单击

2、dblclick 行双击

3、contextmenu 右键菜单

4、mouseenter 鼠标移入

5、mouseleave 鼠标移出

事件冒泡：

上面解决方案的bug是：点击操作栏、操作栏内的按钮，都会触发事件冒泡致行点击。所以我在每一个按钮的点击事件上都加了阻止事件冒泡 .stop。

还有一点值得注意的是 popconfirm 组件，默认点击 删除按钮会弹框，所以我加了 @click.stop="" 。

以上的解决方案，可以正常点击操作栏按钮，点击操作栏仍会触发行点击事件，如果觉得没有影响就可以到此为止。如果想要点击操作栏不触发行点击，解决方案在下方。

二、如何点击操作栏不触发行点击

固定列 fixed: true

//行点击handleClickRow(record, index){return {on: {click: (event) => {const rowElement = event.target.closest("tr");const lastCellElement = rowElement.lastElementChild;const clickedCellElement = event.target.closest("td");const isLastColumn = clickedCellElement === lastCellElement;if (!isLastColumn) { //当点击表格最后一列时，不触发行点击console.log(recore, index)}}}}},

不固定列

    //行点击handleClickRow(record, index){return {on: {click: (event) => {const lastColumnIndex = this.columns.length - 1;const isLastColumn = event.target.cellIndex === lastColumnIndex;if (!isLastColumn) {this.handleAdd('look', record) }}}}},

以上。

如果我的博客解决了您的问题，欢迎评论、点赞、关注，一起讨论～