antdesign table 學(xué)習(xí)

<Table columns={columns}  dataSource={data}
expandedRowRender={this.expandedRowRender} />

• columns 表頭屬性
• dataSource 表格內(nèi)容數(shù)據(jù)源
• expandedRowRender可展開(kāi)的行，返回一個(gè)函數(shù)

默認(rèn)是在最前邊加上按鈕來(lái)展開(kāi)，也就是依據(jù)這個(gè)屬性 expandIconAsCell:true，如果不想依據(jù)這個(gè)屬性，可以設(shè)置通過(guò)點(diǎn)擊事件來(lái)展開(kāi)

this.state = {
      expandIconAsCell: false,
      expandRowByClick: true,
      expandedRowKeys: [],
}
<Table expandRowByClick={this.state.expandRowByClick}
       expandIconAsCell={this.state.expandIconAsCell}
       expandedRowKeys={this.state.expandedRowKeys} />

在任何你想添加按鈕的點(diǎn)擊事件中來(lái)調(diào)用這個(gè)方法onExpandedRowsChange()來(lái)設(shè)置expandedRowKeys， 默認(rèn)是數(shù)組，expandedRowRender方法就會(huì)根據(jù)expandedRowKeys的值來(lái)展開(kāi)，如果想設(shè)置默認(rèn)展開(kāi)，用 defaultExpandedRowKeys屬性

onExpandedRowsChange (rows) {
    this.setState({
      expandedRowKeys: [rows.id]
    })
 }

這樣也就可以根據(jù)這個(gè)expandedRowKeys的值來(lái)進(jìn)行全部展開(kāi)和收縮

 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中進(jìn)行調(diào)用

{this.toggleButton()}