antd vue中如何給a-table的行添加點擊監聽器

Question

這是我要渲染的表格的代碼片段，已經從antd導入a-table 。 目前，我們可以添加一個額外的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>

Answer 1

視圖 3

AntDesign v3.0.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)
      }
    }
}

Answer 2

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

Answer 3

不使用 jsx 插件：

來自 Matt Sanders 的修改代碼

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

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

Answer 4

無需使用JSX插件在這里，我發現羅馬的代碼片段不是為我工作，但這個工作：

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

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