ant.design rowSelection

rowSelection

type

• type: ‘checkbox’ 複選框支持全選反選
• type: ‘radio’ 單選

selectedRowKeys (配合onChange使用)

	const rowSelection = {
      type: 'checkbox',
      selectedRowKeys,
      onChange: this.onSelectChange,
    };
	
	onSelectChange = (selectedRowKeys, selectedRows) => { //選中項發生變化回調
		//自定義選中規則
	    this.setState({
	      selectedRowKeys,
	      selectedRows
	    });
	    console.log(selectedRows, selectedRowKeys)
  }
  //1、注意這裏一定要給表格配置rowKeys屬性，標記數據的唯一性
  //2、state裏一定要設定selectedRowKeys的初始值，不然不能切換選中

getCheckboxProps

• 自定義禁止使用規則

	const rowSelection = {
      type: 'checkbox',
      selectedRowKeys,
      onChange: this.onSelectChange,
      getCheckboxProps: (record) => this.handleTabledisabled(record),
    };


	handleTabledisabled = (record) => { //禁用已選
	    const { showSelectGoods } = this.state; //已經選中的數據
	    if (showSelectGoods.length > 0) {
	      let addDeliverData = showSelectGoods;
	      addDeliverData = addDeliverData.filter((item) => (item.outGoodsId === record.outGoodsId)); //過濾表格數據和已選中數據
	      return {
	      //返回禁用規則
	        disabled: record.outGoodsId === (addDeliverData.length ? addDeliverData[0].outGoodsId : false),
	      };
	    } else {
	      return {
	        disabled: false,
	      };
	    }
  }

pagination

這裏我的後臺數據接口時：

	{
		pageNum: 1
		pageSize: 20
		total: 110
		pages: 6
		resultData: [.......表格數據]
	}

 <Table
 	  loading={this.props.Loading}
	  columns={tableColumns}
	  rowKey={(record) => record.id}
	  dataSource={list.resultData ? list.resultData : []}
	  pagination={{
	    total: list.total ? list.total : 0,
	    showSizeChanger: true,
	    current: list.resultData ? list.pageNum : 1,
	    pageSize: this.state.spreadFormParam.pageSize,
	    showTotal: (_total) => `共 ${list.total ? list.total : 0} 條記錄`,
	    hideOnSinglePage: !(list && list.pages > 1),
	    onChange: this.handlePageNumChange,
	    onShowSizeChange: this.handlePageSizeChange,
	    showQuickJumper: { goButton: <Button type="primary" style={{marginLeft: '5px'}}>確定</Button> },
	 }}
> 

api解釋： https://ant.design/components/pagination-cn/#API