antdesign 表格分页、表格嵌套、表格展开

1. 表格分页

1、引入 Table 组件

<Table 
  loading={ loading }
  dataSource={ dataSource }
  columns={ columns }
  pagination={ pagination }/>

2、定义 pagination 属性

//page 为 model 层的数据，存放总数，当前页码，以及size
const { page } = this.props
const pagination = {
  showSizeChanger: true, //是否可以改变 pageSize
  showQuickJumper: false, //是否可以快速跳转至某页
  total: page.total,
  pageSize: page.size,
  current: page.page,
  //显示总条数
  showTotal: ( total, range ) => `显示 ${range[0]}-${range[1]} , 总共 ${total} 条`, 
  //pageSize 变化的回调
  onShowSizeChange: (current, pageSize) => this.changePageSize(current, pageSize),
  //页码改变的回调，参数是改变后的页码及每页条数
  onChange: (current, pageSize) => this.changePage(current, pageSize),
},

3、页码改变的回调

changePage(current, pageSize){
  const { dispatch } = this.props;
  const params = {
    page: current,
    size: pageSize,
  };
  dispatch({
    type: 'viewList/fetch',
    payload: params,
  })
}

pageSize 变化的回调与页码改变的回调大致相同。

changePageSize(current, pageSize){
    const { dispatch } = this.props;
    const params = {
      page: current,
      size: pageSize,
    };
    dispatch({
      type: 'viewList/fetch',
      payload: params,
    })
  }

2. 表格嵌套

1、expandedRowRender 额外的展开行，即子表格

const expandedRowRender = (record) => {
  //一些业务逻辑
  if (contractId !== record.contractId) {
    this.setState({
      contractId: record.contractId,
    });
  }
  //定义子表格的行
  const column = [
    { title: '联系人姓名', dataIndex: 'contactName', key: 'contactName' },
    { title: '联系人性别', dataIndex: 'sex', key: 'sex' },
    { title: '联系人手机', dataIndex: 'mobilePhone', key: 'mobilePhone' },
    { title: '联系人邮箱', dataIndex: 'email', key: 'email' },
  ];

  return (
    <Table columns={column} dataSource={record.contactList} pagination={false} />
  );
};

2、主表格的行

const columns = [
  {
    title: '角色',
    dataIndex: 'roleCode',
    key: 'roleCode',
    width: 100,
  },
  {
    title: '编码',
    dataIndex: 'partyNumber',
    key: 'partyNumber',
    width: 200,
  },
  {
    title: '名称',
    dataIndex: 'partyName',
    key: 'partyName',
  },
]

3、主表格

<Table
  dataSource={partyInformations}
  columns={columns}
  pagination={false}
  loading={queryPartyLoading}
  expandedRowRender={expandedRowRender}
  bordered
  scroll={{ x: 1100 }}
  rowKey="uuid"
/>

3. 表格展开

1、数据

constructor(props) {
  super(props);
  this.state = {
    expandedRows: [], // 展开行
  };
}

2、展开的行变化时触发

changeExpandedRows = expandedRows => {
  this.setState({
    expandedRows,
  });
 };

3、columns 和 dataSource

const columns = [
  {
    title:'年度',
    key: 'budgetYear',
    dataIndex: 'budgetYear',
  },
  {
    title: '类型',
    dataIndex: 'budgetType',
    key: 'budgetType',
  },
  {
    title: '目录',
    dataIndex: 'parentCategory',
    key: 'parentCategory',
  },
]

const datatList = [
{
  "recordKey":"capex",
  "budgetType":"capex",
  "parentCategory":null,
  "children":
  [
    {
      "recordKey":"hardwarecapex",
      "budgetType":null,
      "parentCategory":"hardware",
      "children":
      [
        {
          "budgetType":"capex",
          "budgetYear":2019,
          "parentCategory":"hardware",
          "recordKey":"111",
        },
        {
          "budgetType":"capex",
          "budgetYear":2019,
          "parentCategory":"hardware",
          "recordKey":"112",
        },
        {
          "recordKey":"AL201912040001",
          "budgetType":"capex",
          "budgetYear":2019,
          "parentCategory":"hardware",
        }
      ]
    },
  ]
}]

4、引入 Table 组件

<Table
  columns={columns}
  dataSource={datatList}
  pagination={false}
  expandedRowKeys={this.state.expandedRows}
  onExpandedRowsChange={this.changeExpandedRows.bind(this)} 
  rowKey={record => record.recordKey}
  style={{ marginTop: 15 }}
/>