ant-design-vue/components/vc-table/demo/rowAndCellClick.js

/* eslint-disable no-console,func-names,react/no-multi-comp */
import Table from '../index'
import '../assets/index.less'

const onRowClick = (record, index, event) => {
  console.log(`Click nth(${index}) row of parent, record.name: ${record.name}`)
  // See https://facebook.github.io/react/docs/events.html for original click event details.
  if (event.shiftKey) {
    console.log('Shift + mouse click triggered.')
  }
}

const onRowDoubleClick = (record, index, e) => {
  console.log(`Double click nth(${index}) row of parent, record.name: ${record.name}`, e)
}

const data = [{
  key: 1,
  name: 'a',
  age: 32,
  address: 'I am a',
  children: [{
    key: 11,
    name: 'aa',
    age: 33,
    address: 'I am aa',
  }, {
    key: 12,
    name: 'ab',
    age: 33,
    address: 'I am ab',
    children: [{
      key: 121,
      name: 'aba',
      age: 33,
      address: 'I am aba',
    }],
  }, {
    key: 13,
    name: 'ac',
    age: 33,
    address: 'I am ac',
    children: [{
      key: 131,
      name: 'aca',
      age: 33,
      address: 'I am aca',
      children: [{
        key: 1311,
        name: 'acaa',
        age: 33,
        address: 'I am acaa',
      }, {
        key: 1312,
        name: 'acab',
        age: 33,
        address: 'I am acab',
      }],
    }],
  }],
}, {
  key: 2,
  name: 'b',
  age: 32,
  address: 'I am b',
}]

export default {
  render () {
    const columns = [{
      title: 'Name',
      dataIndex: 'name',
      key: 'name',
      width: 400,
    }, {
      title: 'Age',
      dataIndex: 'age',
      key: 'age',
      width: 100,
      customRender: (text) => (
        <span>{text} (Trigger Cell Click)</span>
      ),
      customCell: (record) => ({
        on: {
          click (e) {
            console.log('Click cell', record, e.target)
          },
        },
      }),
    }, {
      title: 'Address',
      dataIndex: 'address',
      key: 'address',
      width: 200,
    }]
    return (
      <Table
        columns={columns}
        data={data}
        customRow={(record, index) => ({
          on: {
            click: onRowClick.bind(null, record, index),
            dblclick: onRowDoubleClick.bind(null, record, index),
          },
        })}
      />
    )
  },
}