Recently I met a requirement, that is, in a pop-up list, the default check has been bound to the data and can not be cancelled, so I have this record

Customize the rowSelection property

Check the official documentation and find this way, so start customizing

code

const rowSelection = {
	type: 'checkbox'.selectionRowKeys: [...selectedRows, ...oldBindList],
	onChange: this.handleSelectRows, 
	// Set the edit status of each line according to certain rules, such as the default selected line
	getCheckboxProps(record) {
		return {
			disabled: oldBindList.indexOf(record.id) ! = =- 1}; }};Copy the code

Code reading

RowSelection is an object that exists, and that’s what I need

  • type

    Optionally checkbox or Radio, which is the style

  • selectionRowKeys

    The selected row displayed on the interface, where selectedRows is used to update the selected row and oldBindList is the array of data ids that the server returns that have been bound

    Put them together when you display them

  • onChange

    Sets click events for each row

  • GetCheckboxProps method

    Use to customize which rows are not editable by default, of course, the bound data returned by the server

Implement click methods for each line

code

handleSelectRows = (selectedRowsKeys, selectedRows) = > {
	const oldBindList = this.props; // Get default binding data

	const newSelectedRowsKey = selectedRowsKeys.filter(
		(item) = > oldBindList.indexOf(item) === - 1
	);

	const newSelectedRows = selectedRows.filter(
		(item) = > oldBindList.indexOf(item.id) === - 1
	);

	this.setState({
		// Update data
		selectedRowsKeys: newSelectedRowsKey,
		selectedRows: newSelectedRows,
	});
};
Copy the code

Code reading

  • selectedRowsKeys

    The simple data for all the rows that are currently selected, and I’ve got an array of ids here, will change as you click

  • selectedRows

    The details of all currently selected rows also change with the click

  • newSelectedRowsKey

    The culling server returns the bound array of ids, which are purely new

  • newSelectedRows

    The culling server returns the full array of bound data, which is also pure new data

Using customrowSelection

code

Add this property to the table property

rowSelection={{ ... rowSelection, }}Copy the code

Code reading

It’s the deconstruction of custom objects

conclusion

In this way, the interface effect of setting the default selected row is not cancelable, and when submitting new data, the original binding of pure new data is also removed