美文网首页让前端飞
antd的Table组件怎样勾选表格行

antd的Table组件怎样勾选表格行

作者: 废柴码农 | 来源:发表于2019-01-09 20:59 被阅读17次

用官方提供的方法rowSelection代码如下:

  const rowSelection = {
      onChange: (selectedRowKeys, selectedRows) => {
          console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
      getCheckboxProps: record => ({
          disabled: record.name === 'Disabled User', // Column configuration not to be checked
          name: record.name,
      }),
  };

 <Table 
  columns={columns} 
  rowSelection={rowSelection}
  rowKey={record =>record.id} //这一个一定要选
  dataSource={this.state.tableData} 
  pagination={false}
  />

注意:上面这种方法是我从官网copy下来的但是会有一个潜在的bug,就是选中后再次进来页面不能清除上一次选中的缓存,我的前两篇文章会有介绍,下面具体又复制了另一种方法,代码如下:

state={
selectedRowKeys:[ ],
}
const {selectedRowKeys } = this.state;
            const rowSelection = { 
                selectedRowKeys,
                onChange: (selectedRowKeys) => {
                    this.setState({
                        selectedRowIds : selectedRowKeys.map(Number),
                        selectedRowKeys 
                    })
                },
            };
//这种方法如果清楚缓存的时候只需要清楚掉selectedRowKeys为空即可。

相关文章

网友评论

    本文标题:antd的Table组件怎样勾选表格行

    本文链接:https://www.haomeiwen.com/subject/slknrqtx.html