Question

我正在蚂蚁设计表（Expandable Row）上实现可扩展行功能，并且正如在蚂蚁设计网站上所述，它工作得很好。但是我想扩展表格的功能，以包括当用户单击表格右下角允许分页的按钮时行的折叠。这是一个非常简单的问题，因此我不会通过发布代码来使其混乱。任何帮助或链接将不胜感激。

编辑代码段

Job aborted due to stage failure: Task 139 in stage 1.0 failed 4 times, most recent failure: Lost task 139.3 in stage 1.0 (TID 405, myhost, executor 197): ExecutorLostFailure (executor 197 exited caused by one of the running tasks) Reason: Container marked as failed: container_111 on host: myhost. Exit status: 143. Diagnostics: Container killed on request. Exit code is 143

Answer 1

您可以使用Ant Design的expandedRowKeys组件的API的Table方法来实现此目的，该方法是已经扩展的行的键的列表。空列表表示所有行均已折叠。

您可以使用onChange方法捕获分页按钮的点击，该方法可用于调用用于设置组件状态的函数：

class MyTable extends Component {
  constructor(props) {
    super(props);
    this.state = { currentPage: 1, expandedRows: [] };
    this.handleChange = this.handleChange.bind(this);
  }

  handleChange(pagination) {
    // changes the page, collapses all rows
    this.setState({ currentPage: pagination.current, expandedRows: [] });
  }

  handleRowExpand(record) {
    // if a row is expanded, collapses it, otherwise expands it
    this.setState(prevState =>
      prevState.expandedRows.includes(record.key)
        ? {
            expandedRows: prevState.expandedRows.filter(
              key => key !== record.key
            )
          }
        : { expandedRows: [...prevState.expandedRows, record.key] }
    );
  }

  render() {
    return (
      <Table
        dataSource={YOUR_DATA}
        ...OTHER_PROPS
        pagination={{ current: this.state.currentPage }}

        // pagination buttons clicked
        onChange={this.handleChange}

        // expand + icon clicked
        onExpand={(expanded, record) => this.handleRowExpand(record)}

        // tell the 'Table' component which rows are expanded
        expandedRowKeys={this.state.expandedRows}
      />
    );
  }
}

蚂蚁设计-单击分页按钮即可折叠展开的行

1 个答案: