antd vue의 a-table 행에 click listener를 추가하는 방법

antd vue의 a-table 행에 click listener를 추가하는 방법

렌더링하려는 테이블의 코드 조각입니다. Import했습니다.a-tablefrom. 현재 추가 가능td이 목록 페이지에서 상세 페이지로 라우팅하려면 클릭 기능을 사용합니다.

<a-table
    :columns="companiesColumns"
    :dataSource="getDisplayData"
    class="companies-table"
    :pagination="false"
    rowKey="id"
    >
    <span slot="nse_symbol" slot-scope="nse_symbol" class="nse-symbol">
        <span>{{ nse_symbol || '-' }}</span>
    </span>
</a-table>

Antd Vue에 속성이 포함되어 있습니다.customRow한 줄에 소품을 세팅할 수 있습니다.

사용 예(참고: 여기서 antdvue는 vue jsx 구문을 사용하고 있습니다)

<Table
  customRow={(record) => {
    return {
      props: {
        xxx...
      },
      on: {
        click: (event) => {},       // click row
        dblclick: (event) => {}, // double click row
        contextmenu: (event) => {}  // right button click row
        mouseenter: (event) => {}   // mouse enter row
        mouseleave: (event) => {}   // mouse leave row
      },
    };
  )}
  customHeaderRow={(column) => {
    return {
      on: {
        click: () => {},        // click header row
      },
    };
  )}
/>

자세한 내용은 이쪽 : https://www.antdv.com/components/table/ # customRow-usage

갱신하다

OP가 지적한 바와 같이 문서의 이 예에서는 동작하기 위해 추가 플러그인이 필요합니다.플러그인은 https://github.com/vuejs/babel-plugin-transform-vue-jsx 에서 찾을 수 있습니다.

jsx 플러그인 사용 안 함:

Matt Sanders에서 코드 수정

<a-table :dataSource="dataSource" :columns="columns" rowKey="id" :customRow="customRow">

const customRow = (record) => {
 return {
  onClick: (event) => {console.log('click row', record);}
 };
}

여기서 jsx 플러그인을 사용할 필요가 없고, Roman의 스니펫이 작동하지 않는다는 것을 알게 되었습니다만, 이것은 효과가 있었습니다.

<a-table :customRow="customRow"></a-table>

function customRow(record) {
      return {
        on: {
          click: event => {
            console.log(event, record);
          }
        }
      };
    }

Vue 3

AntDesign v3.0-beta.9

이 방법밖에 없어요

#template

<template>
  <a-table 
    :columns='columns'
    :data-source='data'
    @change='onChange'
    :customRow="customRow"
    :row-selection='rowSelection'
    :pagination="pagination"
  />
</template>

#methods

methods: {
 customRow(record: TableDataType) {
      return {
          onClick: (event: PointerEvent) => console.log('record', record, 'event', event)
      }
    }
}

언급URL : https://stackoverflow.com/questions/60015660/how-to-add-click-listener-to-row-of-a-table-in-antd-vue