2017.11.20

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()}