V3版本:
组件代码
// -----------------复选框功能 start---------------------
handleColClick = record => {
this.props.dispatch({
type: 'stationTally/updateWorkStationSelectedKeys',
payload: record,
});
};
selectAll = (selected, selectedRows, changeRows) => {
this.props.dispatch({
type: 'stationTally/selectedMatericalAllData',
payload: { selected, selectedRows, changeRows },
});
};
// -----------------复选框功能 end---------------------
const rowSelection = {
// 表格选择框设置
type: 'checkbox',
onSelectAll: this.selectAll,
onSelect: this.handleColClick,
selectedRowKeys: workStationSelectedRowKeys,
};
Model层代码
updateWorkStationSelectedKeys(state, { payload }) {
let oldKeys = state.workStationSelectedRowKeys;
let oldListKeys = state.workStationSelectList;
if (oldKeys.includes(payload.id)) {
oldKeys = oldKeys.filter(item => item !== payload.id);
oldListKeys = oldListKeys.filter(item => item.id !== payload.id);
} else {
oldKeys.push(payload.id);
oldListKeys.push(payload);
}
return {
...state,
workStationSelectedRowKeys: [...oldKeys],
workStationSelectList: [...oldListKeys],
};
},
selectedMatericalAllData(state, { payload }) {
let oldKeys = state.workStationSelectedRowKeys;
let oldListKeys = state.workStationSelectList;
const personInfoList = payload.changeRows;
if (personInfoList.length > 0) {
personInfoList.forEach(item => {
if (payload.selected) {
oldKeys.push(item.id);
oldListKeys.push(item);
} else {
oldKeys = oldKeys.filter(ele => item.id !== ele);
oldListKeys = oldListKeys.filter(ele => item !== ele);
}
});
}
return {
...state,
workStationSelectedRowKeys: [...oldKeys],
workStationSelectList: [...oldListKeys],
};
},
V4版本
使用v4更新的API(rowSelection中的onChange)分页的时候,在一页勾选然后跳到另一页再勾选时,之前一页勾选的记录就会消失,不过这种写法很便捷。
组件代码
onSelectChange = (selectedRowKeys, selectedRowList) => {
this.props.dispatch({
type: 'qualityTesting/updatePersonalSelectedKeys',
payload: { selectedRowKeys, selectedRowList },
});
};
const rowSelection = {
// 表格选择框设置
type: 'checkbox',
selectedRowKeys: personalSelectedRowKeys,
onChange: this.onSelectChange,
};
Model代码
updatePersonalSelectedKeys(state, { payload }) {
return {
...state,
personalSelectedRowKeys: payload.selectedRowKeys,
personalSelectList: payload.selectedRowList,
};
},
其他
// 可以拼接字段作为rowkey
rowKey={record => `${record.id}-${record.stationUserId}`}