效果:
代码:
import React from 'react';
import {Table} from 'antd';
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>
);
}
}
原理:
可以用来操作一键展开和一键收起