how to add click listener to row of a-table in antd vue

在 antd-vue 中使用 a-table 组件来显示数据表格时，如果我们想要为每一行添加点击事件监听器，可以通过使用 on 属性中的 row 或者 customRow 方法来实现。下面是具体如何操作的步骤和代码示例：

步骤 1: 绑定点击事件

首先，在 a-table 组件中使用 customRow 方法来为每行绑定点击事件。这个方法会为表格的每一行元素返回一个对象，我们可以在这个对象中定义 click 事件处理函数。

代码示例

vue
<template>
  <a-table :columns="columns" :dataSource="data" :rowKey="record => record.key" @customRow="onCustomRow">
  </a-table>
</template>

<script>
export default {
  data() {
    return {
      columns: [
        {
          title: '姓名',
          dataIndex: 'name',
          key: 'name',
        },
        {
          title: '年龄',
          dataIndex: 'age',
          key: 'age',
        },
        {
          title: '住址',
          dataIndex: 'address',
          key: 'address',
        }
      ],
      data: [
        {
          key: '1',
          name: '张三',
          age: 32,
          address: '北京市朝阳区',
        },
        {
          key: '2',
          name: '李四',
          age: 42,
          address: '北京市海淀区',
        },
      ],
    };
  },
  methods: {
    onCustomRow(record, rowIndex) {
      return {
        onClick: event => { // 点击行
          console.log(`点击了第 ${rowIndex} 行`, record);
          this.handleRowClick(record, rowIndex);
        },
        // 也可以添加其它事件监听
        // onMouseEnter: event => {},
        // onMouseLeave: event => {},
      };
    },
    handleRowClick(record, rowIndex) {
      // 实现具体的点击处理逻辑
      alert(`你点击了 ${record.name} 的信息行`);
    }
  }
}
</script>

说明

• 在 customRow 方法中，你可以返回一个包含事件处理器的对象，例如 onClick 用来处理点击事件。你可以在这里定义任何你需要的事件处理器，如 onMouseEnter, onMouseLeave 等。
• record 和 rowIndex 是 customRow 方法提供的两个参数，分别代表当前行的数据和行索引。
• 通过这种方式，你可以非常灵活地为每一行或者特定行添加不同的处理逻辑和事件监听。

这种方法提供了一种灵活且强大的方式来交互表格，特别是当你需要根据行的具体数据来执行不同逻辑时非常有用。