antd表格table的展开不能自定义设置展开的触发点，只能在表格行或者表头默认的地方展开?

1.可以自定义设置展开的触发点。

——呈上代码

import React from 'react';

import { Table } from 'antd';

import './xiaoyu.less';

const key = [];//定义一个空的数组。

export default class xiaoyu extends React.Component {

constructor(props) {

super(props)

this.state = {

open: false,

arr: []

}

}

 

open = (e, record) => {

if (e.target.innerHTML == '展开') {

key.push(record.key);//点击的每一行的key的值保存下来。

this.setState({

arr: key

})

e.target.innerHTML = '收起'

} else if (e.target.innerHTML == '收起') {

key.splice(key.indexOf(record.key), 1);//再次点击的时候从数组删除上次存入的key值。

this.setState({

arr: key

})

e.target.innerHTML = '展开'

}

}

 

render() {

const columns = [

{ title: 'Name', dataIndex: 'name', key: 'name' },

{ title: 'Age', dataIndex: 'age', key: 'age' },

{ title: 'Address', dataIndex: 'address', key: 'address' },

{ title: 'Action', dataIndex: '', key: 'x', render: (text, record) => <a href="javascript:;" onClick={(e) => this.open(e, record)}>展开</a> },

];

 

const data = [

{ key: 1, name: 'John Brown', age: 32, address: 'New York No. 1 Lake Park', description: 'My name is John Brown, I am 32 years old, living in New York No. 1 Lake Park.' },

{ key: 2, name: 'Jim Green', age: 42, address: 'London No. 1 Lake Park', description: 'My name is Jim Green, I am 42 years old, living in London No. 1 Lake Park.' },

{ key: 3, name: 'Joe Black', age: 32, address: 'Sidney No. 1 Lake Park', description: 'My name is Joe Black, I am 32 years old, living in Sidney No. 1 Lake Park.' },

];

return (

<div>

<Table

columns={columns}

expandedRowRender={record => <p style={{ margin: 0 }}>{record.description}</p>}

dataSource={data}

expandedRowKeys={this.state.arr}

rowKey={row => row.key}

/>

</div>

)

}

}

——效果如图