【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) 
            }
          }
        }
      }
    },

以上。

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