Ant Design Vue 给table表格行加点击事件

首先官方定义的是customRow设置行属性

customRow

设置行属性

Function(record, index)

官网上会给出这么使用：

customRow 用法

适用于 customRow customHeaderRow customCell customHeaderCell。遵循Vue jsx语法。

<Table
  customRow={(record) => {
    return {
      xxx... //属性
      onClick: (event) => {},       // 点击行
      onDblclick: (event) => {},
      onContextmenu: (event) => {},
      onMouseenter: (event) => {},  // 鼠标移入行
      onMouseleave: (event) => {}
    };
  }}
  customHeaderRow={(column) => {
    return {
      onClick: () => {},        // 点击表头行
    };
  }}
/>

但是很多小伙伴可能不会使用这种语法，或者一用就报错，跟我刚开始用一样 ，下面我们会介绍另一种方法：

正题

第一步

给a-table元素内加入这个属性 :customRow="rowClick"

<a-table
      bordered
      :data-source="dataSource"
      :columns="columns"
      :customRow="rowClick"
    />

第二步 

这样定义函数名就可以，然后返回你想用什么事件触发，这里点击事件触发onClick，返回的第一个参数是点击的行参数，第二个是行下标

function rowClick(record, index) {
      return {
        onClick: (event) => {
          console.log(record.tablename, index, event, "666");
        },
      };
    }

 这里我用的是vue3.0，vue2.0写到方法里即可

最后 

如果对您有帮助，希望能给个👍评论/收藏/三连！

博主为人老实，无偿解答问题哦❤