antdesign table 学习
<Table columns={columns} dataSource={data}
expandedRowRender={this.expandedRowRender} />
- columns 表头属性
- dataSource 表格内容数据源
- expandedRowRender可展开的行，返回一个函数
默认是在最前边加上按钮来展开，也就是依据这个属性 expandIconAsCell:true，如果不想依据这个属性，可以设置通过点击事件来展开
this.state = {
expandIconAsCell: false,
expandRowByClick: true,
expandedRowKeys: [],
}
<Table expandRowByClick={this.state.expandRowByClick}
expandIconAsCell={this.state.expandIconAsCell}
expandedRowKeys={this.state.expandedRowKeys} />
在任何你想添加按钮的点击事件中来调用这个方法onExpandedRowsChange()来设置expandedRowKeys， 默认是数组，expandedRowRender方法就会根据expandedRowKeys的值来展开，如果想设置默认展开，用 defaultExpandedRowKeys属性
onExpandedRowsChange (rows) {
this.setState({
expandedRowKeys: [rows.id]
})
}
这样也就可以根据这个expandedRowKeys的值来进行全部展开和收缩
toggleButton() {
if (this.state.expandedRowKeys.length) {
const closeAll = () => this.setState({ expandedRowKeys: [] });
return <button onClick={closeAll}>Close All</button>;
}
const openAll = () => this.setState({ expandedRowKeys: [0, 1, 2] });
return <button onClick={openAll}>Expand All</button>;
}
render中进行调用
{this.toggleButton()}
