近日碰到一个需求， 就是在一个弹出的列表里需要默认勾选已经绑定过的数据并且不可取消，所以才有了这次记录
自定义rowSelection属性
查阅官方文档， 发现有这个途径， 那就开始自定义吧
代码
const rowSelection = { type: 'checkbox', selectionRowKeys: [...selectedRows, ...oldBindList], onChange: this.handleSelectRows, // 根据一定规则设置每一行的编辑状态, 比如默认选中的行 getCheckboxProps(record) { return { disabled: oldBindList.indexOf(record.id) !== -1, }; },};代码解读
rowSelection是一个对象存在的，里面这些是我需要的
type可选
checkbox或者radio， 就是样式selectionRowKeys界面所显示的选中行， 其中
selectedRows是用来更新点击选中的行，oldBindList是服务器返回已经绑定的数据id数组显示的时候把他们进行拼接
onChange设置每一行的点击事件
getCheckboxProps方法用于自定义设置哪些行是默认不可编辑的， 当然是服务器返回的已经绑定的数据
实现每一行的点击方法
代码
handleSelectRows = (selectedRowsKeys, selectedRows) => { const oldBindList = this.props; // 获取默认绑定数据 const newSelectedRowsKey = selectedRowsKeys.filter( (item) => oldBindList.indexOf(item) === -1 ); const newSelectedRows = selectedRows.filter( (item) => oldBindList.indexOf(item.id) === -1 ); this.setState({ // 更新数据 selectedRowsKeys: newSelectedRowsKey, selectedRows: newSelectedRows, });};代码解读
selectedRowsKeys当前全部选中的行的简单数据， 我这里是个
id数组， 会随着点击变化selectedRows当前全部选中行的详细数据， 也是随着点击而变化
newSelectedRowsKey剔除服务器返回已经绑定的
id数组， 也就是纯新增的newSelectedRows剔除服务器返回已绑定的完整数据数组， 也是纯新增数据
使用自定义rowSelection
代码
rowSelection\={{ ...rowSelection, }}