Ant Design Vue - 表格 ＜a-table＞ 组件绑定行点击事件（点击表格行事件）

前言

当鼠标点击表格每行后，触发点击事件且能拿到行数据方便操作（复选框不受点击事件影响），如下图所示：

解决方案

其实官方已经给出了示例，详见：Ant Design Vue customRow 用法，可用于您进行参照。

您配置好 customRow 时，对照官方文档在 rowClick 函数中进行事件绑定。

通过 record 参数获取行数据，用于做一些业务处理。

<!--
为了不影响您参考，表格其他配置已删去。
您只需要关注 customRow 设置行属性。
-->
<a-table :customRow="rowClick">
	...
</a-table>

/**
 * 点击表格行触发
 * @param {Object} record - 行数据
 * @param {Number} index - 索引值
 * @return Function
 */
rowClick: function(record, index) {
  return {
    on: {

      click: () => {
        console.log('点击了我')
      },

      dblclick: () => {
       	console.log('双击了我')
      },
      
      // ...
    }
  }
}

SEO <strog>

Ant Design Vue (4) 给table表格整行加点击事件antd的表格点击表格整行添加点击事件vue用ant design中table表格,点击某行时触发的事件操作vue用ant design中table表格,点击某行时触发的事件操作ant table表格整行点击事件并获取当前行的数据Ant design vue表格行点击事件 表格 ＜a-table＞ 组件绑定行点击事件（点击表格行事件）