表格勾选框antd3.0写法兼容4.0

Antd组件库复选框总结：

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}`}