ant.design rowSelection

最新推荐文章于 2024-04-07 16:29:09 发布

扎扎小成

最新推荐文章于 2024-04-07 16:29:09 发布

阅读量2k

点赞数 1

分类专栏： react ant.design 文章标签： reactjs

本文链接：https://blog.csdn.net/qq_41271393/article/details/105574889

版权

react 同时被 2 个专栏收录

2 篇文章 0 订阅

订阅专栏

ant.design

1 篇文章 0 订阅

订阅专栏

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> },
	 }}
>