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);
          }
        }
      };
    }