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}`}
欢迎阅读!
暂无评论

发送评论 编辑评论


				
|´・ω・)ノ
ヾ(≧∇≦*)ゝ
(☆ω☆)
(╯‵□′)╯︵┴─┴
 ̄﹃ ̄
(/ω\)
∠( ᐛ 」∠)_
(๑•̀ㅁ•́ฅ)
→_→
୧(๑•̀⌄•́๑)૭
٩(ˊᗜˋ*)و
(ノ°ο°)ノ
(´இ皿இ`)
⌇●﹏●⌇
(ฅ´ω`ฅ)
(╯°A°)╯︵○○○
φ( ̄∇ ̄o)
ヾ(´・ ・`。)ノ"
( ง ᵒ̌皿ᵒ̌)ง⁼³₌₃
(ó﹏ò。)
Σ(っ °Д °;)っ
( ,,´・ω・)ノ"(´っω・`。)
╮(╯▽╰)╭
o(*////▽////*)q
>﹏<
( ๑´•ω•) "(ㆆᴗㆆ)
😂
😀
😅
😊
🙂
🙃
😌
😍
😘
😜
😝
😏
😒
🙄
😳
😡
😔
😫
😱
😭
💩
👻
🙌
🖕
👍
👫
👬
👭
🌚
🌝
🙈
💊
😶
🙏
🍦
🍉
😣
Source: github.com/k4yt3x/flowerhd
颜文字
Emoji
小恐龙
花!
上一篇
下一篇