antd table rowSelection多选框(可选择列表)
可选择列表如上图,是antd的可选择列表,我们如何将普通列表变成可选择列表呢,这就用到了一个很重要的属性rowSelection。rowSelection如下图,rowSelection属性是一个对象,他有很多的参数。下面是antd官网截图,关于rowSelection的功能配置。指定可选择列的属性作为key注意:其中有个很重要的点,就是selectedRowKeys默认取得是列表的第一项,如果你
·
可选择列表
如上图,是antd的可选择列表,我们如何将普通列表变成可选择列表呢,这就用到了一个很重要的属性rowSelection。
rowSelection
如下图,rowSelection属性是一个对象,他有很多的参数。
下面是antd官网截图,关于rowSelection的功能配置。
指定可选择列的属性作为key
注意:其中有个很重要的点,就是selectedRowKeys默认取得是列表的第一项,如果你想指定key,就要在table增加rowKey={record => record.id},id可以换成record的任意值。
// selectedRowKeys表示所选择列的key是一个字符串,selectedRows表示所选列的信息,是一个数组
rowSelectionChange = (selectedRowKeys, selectedRows) => {
console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
this.setState({
selectedRowKeys: selectedRowKeys
})
}
render() {
const { form } = this.props;
const {
tabData,
} = this.state;
const rowSelection = {
onChange: (selectedRowKeys, selectedRows) => {
this.rowSelectionChange(selectedRowKeys, selectedRows)
},
};
return (
<Fragment>
<Row style={{maxHeight: 100, overflowY: "auto" }}>
<Table
columns={this.columns}
dataSource={tabData}
pagination={false}
scroll={{ x: "max-content" , }}
rowSelection={rowSelection}
rowKey={record => record.id}
/>
</Row>
</Fragment>
);
}
更多推荐
所有评论(0)