版权声明:本文为博主原创文章,可以随意自由转载传播,但请注明出处. https://blog.csdn.net/aikongmeng/article/details/81532381
const { Table } = antd;
const columns = [{
title: 'Name',
dataIndex: 'name',
}, {
title: 'Age',
dataIndex: 'age',
}, {
title: 'Address',
dataIndex: 'address',
}];
const data = [];
for (let i = 0; i < 46; i++) {
data.push({
key: i,
name: `Edward King ${i}`,
age: 32,
address: `London, Park Lane no. ${i}`,
});
}
class App extends React.Component {
state = {
selectedRowKeys: [0,1,2], // Check here to configure the default column
};
onSelectChange = (selectedRowKeys) => {
console.log('selectedRowKeys changed: ', selectedRowKeys);
this.setState({ selectedRowKeys });
}
render() {
const { selectedRowKeys } = this.state;
const rowSelection = {
selectedRowKeys,
onChange: this.onSelectChange,
hideDefaultSelections: true,
selections: [{
key: 'all-data',
text: 'Select All Data',
onSelect: () => {
this.setState({
selectedRowKeys: [...Array(46).keys()], // 0...45
});
},
}, {
key: 'odd',
text: 'Select Odd Row',
onSelect: (changableRowKeys) => {
let newSelectedRowKeys = [];
newSelectedRowKeys = changableRowKeys.filter((key, index) => {
if (index % 2 !== 0) {
return false;
}
return true;
});
this.setState({ selectedRowKeys: newSelectedRowKeys });
},
}, {
key: 'even',
text: 'Select Even Row',
onSelect: (changableRowKeys) => {
let newSelectedRowKeys = [];
newSelectedRowKeys = changableRowKeys.filter((key, index) => {
if (index % 2 !== 0) {
return true;
}
return false;
});
this.setState({ selectedRowKeys: newSelectedRowKeys });
},
}],
onSelection: this.onSelection,
getCheckboxProps: record => ({
disabled: record.name === 'Edward King 2', // Column configuration not to be checked
name: record.name,
che:true,
}),
};
return (
<Table rowSelection={rowSelection} columns={columns} dataSource={data} />
);
}
}
ReactDOM.render(<App />, mountNode);
效果图: