Ant Design Vue实现可点击单元格表单,customCell使用

Ant Design Vue实现可点击单元格表单,customCell使用

<a-table :columns="columns" :data-source="dataSource" :rowKey="'userId'" :scroll="switchChecked?{ x: 1500, y: 300 }:{}">
</a-table>

// ...
data() {
	return {
		//...
		columns: [
			//...
			{
	          title: xxx,
              key: xxx,
              dataIndex: xxx,
              customCell: xxx,
              width: 100,
	          scopedSlots: {
	            customRender: 'columnTitle',
	          },
	          customCell: this.customCell,
	        },
		]
	}
}
methods: {
    customCell(record, rowIndex) {
        return {
          style: {},
          on: {
            click: event => {
              console.log(event.target.cellIndex)
              // 当前点击的行
              console.log(record)
              console.log(rowIndex)
            }
          }
        }
      },
}

其他几种事件:

<Table
  customRow={(record) => {
    return {
      xxx... //属性
      onClick: (event) => {},       // 点击行
      onDblclick: (event) => {},
      onContextmenu: (event) => {},
      onMouseenter: (event) => {},  // 鼠标移入行
      onMouseleave: (event) => {}
    };
  }}
  customHeaderRow={(column) => {
    return {
      onClick: () => {},        // 点击表头行
    };
  }}
/>