reactjs - Ant Design - 单击分页按钮时折叠展开的行

Question

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

编辑代码片段

import * as React from 'react';
import { Tooltip, Table } from 'antd';
import * as IAssignmentsResponse from '../../interfaces/QC/IAssignmentResponse';
import * as moment from 'moment';


     const expandedRowRender = (rowData) => {
        const columns = [
            { title: 'Row1', dataIndex: 'Row1DataIndex', key: '1'},
            { title: 'Row2', dataIndex: 'Row2DataIndex', key: '2'},
            { title: 'Row3', dataIndex: 'Row3DataIndex', key: '3'},
        ];

        return <Table
            columns={columns}
            dataSource={rowData.DataArray}
            pagination={false}>
        </Table>
    }

    const bindRows = (row) => {
        return row.Workitem.WorkflowRefID;
    }

    const columns = [
        {
            title: 'MasterRow1',
            dataIndex: 'MasterRow1DataIndex',
            key: '1',
            render(value) { return value.WorkflowRefID; },
            onFilter: (value, record) => record.Workitem.data1.indexOf(value) === 0,
            sorter: (a, b) => a.Workitem.data1 - b.Workitem.data1
        },
        {
            title: 'MasterRow2',
            dataIndex: 'MasterRow1DataIndex',
            key: '2',
            render(value, record) { return <Tooltip title={record.data2} mouseEnterDelay={.5}>{value}</Tooltip> },
            onFilter: (value, record) => record.data2.indexOf(value) === 0,
            sorter: (a, b) => a.data2- b.data2
        },
        {
            title: 'MasterRow3',
            dataIndex: 'MasterRow1DataIndex',
            key: '3',
            render(value, record) { return <Tooltip title={record.data3} mouseEnterDelay={.5}>{value}</Tooltip> },
            onFilter: (value, record) => record.data3.indexOf(value) === 0,
            sorter: (a, b) => a.data3- b.data3
        }
    ]

    return <Table rowKey={record => bindRows(record)}
        columns={columns}
        dataSource={this.props.assignmentData.AssignmentsResponse.Assignment}
        expandedRowRender={record => expandedRowRender(record)}
        onExpand={this.onTableRowExpand}
        />

Answer 1

您可以使用 Ant Design 的 Table 组件 API 的 expandedRowKeys 方法来实现此目的，该方法是已展开行的键列表。空列表意味着所有行都被折叠。

您可以使用 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}
      />
    );
  }
}