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

When using the a-table component in antd-vue to display a data table, if you want to add click event listeners to each row, you can achieve this by using the customRow property. The following outlines the specific steps and code examples:

Step 1: Binding Click Events

First, use the customRow property in the a-table component to bind click events to each row. This method returns an object for each row element, where you can define the click event handler.

Code Example

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

<script>
export default {
  data() {
    return {
      columns: [
        {
          title: 'Name',
          dataIndex: 'name',
          key: 'name',
        },
        {
          title: 'Age',
          dataIndex: 'age',
          key: 'age',
        },
        {
          title: 'Address',
          dataIndex: 'address',
          key: 'address',
        }
      ],
      data: [
        {
          key: '1',
          name: 'Zhang San',
          age: 32,
          address: 'Chaoyang District, Beijing',
        },
        {
          key: '2',
          name: 'Li Si',
          age: 42,
          address: 'Haidian District, Beijing',
        },
      ],
    };
  },
  methods: {
    onCustomRow(record, rowIndex) {
      return {
        onClick: event => { // Click on row
          console.log(`Clicked on row ${rowIndex}`, record);
          this.handleRowClick(record, rowIndex);
        },
        // You can also add other event listeners
        // onMouseEnter: event => {},
        // onMouseLeave: event => {},
      };
    },
    handleRowClick(record, rowIndex) {
      // Implement specific click handling logic
      alert(`You clicked on the information row for ${record.name}`);
    }
  }
}
</script>

Explanation

• Within the customRow property, you can return an object containing event handlers, such as onClick for handling click events. You can define any event handlers you need, like onMouseEnter and onMouseLeave.
• record and rowIndex are the two parameters provided by the customRow property, representing the current row data and row index, respectively.
• With this approach, you can flexibly add different handling logic and event listeners to each row or specific rows.

This method provides a flexible and powerful way to interact with tables, especially useful when you need to execute different logic based on the specific data of each row.