ProTable rowSelection 支持多选

前言：第一次用到多选，gpt非常好用，比之前网页方便太多。

 

import ProTable from '@ant-design/pro-table';
import React, { useState } from 'react';
 
const TableWithRowSelection = () => {
  // 使用 useState 钩子来保存选中的行
  const [selectedRows, setSelectedRows] = useState([]);
 
  // 定义行选择的配置
  const rowSelection = {
    onChange: (selectedRowKeys, selectedRows) => {
      // 当选中的行发生变化时，更新状态
      setSelectedRows(selectedRows);
    },
    // 初始化时选中的行
    selectedRowKeys: selectedRows.map((item) => item.key),
  };
 
  return (
    <ProTable
      rowSelection={rowSelection}
      // ... 其他 ProTable 属性
    />
  );
};
 
export default TableWithRowSelection;

 

结合自己的业务：

1，批量添加事件监控

// 功能3：批量
    // 使用 useState 钩子来保存选中的行
    const [selectedRows, setSelectedRows] = useState<ContractItem[]>([]);// useState([]);

// 功能3：批量

    // 定义行选择的配置
    const rowSelection = {
      onChange: (selectedRowKeys: any, selectedRows: any) => {
        console.log('selectedRowKeys, selectedRows:', selectedRowKeys, selectedRows);
        // 当选中的行发生变化时，更新状态
        setSelectedRows(selectedRows);
      },
      // 初始化时选中的行
      selectedRowKeys: selectedRows.map((item: any) => item.id),
    };

    const _checkSameValueForKey = (arr: any, key: string) => {
      return arr.every(function(obj: any, index: number, array: any) {
        return index === 0 || obj[key] === array[0][key];
      });
    }
    const batch_update_sub_event = () => {
      if (!_checkSameValueForKey(selectedRows, 'abi_hash')) {
        message.warning("只有ABI-Hash相同才能批量配置事件，请先确保ABI-Hash相同。")
        return false
      }
      // 弹窗，提交
      // 先算出所有勾选合约的事件列表。如果是普通成员，则批量配置时添加的事件不能少于已配置事件列表。部门管理员无限制。
      // console.log('通过，继续')
      let allEventArr: any = []
      let targetKeyArr: any = []
      let idArr: any = []
      let abi_hash = ""
      for ( let i = 0; i < selectedRows.length; i++) {
        allEventArr = allEventArr.concat(selectedRows[i].event.concat(selectedRows[i].event_sub))
        targetKeyArr = targetKeyArr.concat(selectedRows[i].event_sub)
        idArr.push(selectedRows[i].id)
        abi_hash = selectedRows[i].abi_hash
      }
      // console.log(allEventArr, targetKeyArr, idArr, abi_hash)
      allEventArr = Array.from(new Set(allEventArr));
      targetKeyArr = Array.from(new Set(targetKeyArr));
      // console.log(allEventArr, targetKeyArr, idArr, abi_hash)

      const finalAllArr = allEventArr.map((name: any) => {
        return {
          key: name,
          title: name,
          description: name
        }
      })

      showModal(finalAllArr, targetKeyArr, idArr, abi_hash)
    }


// 弹窗2：增减监控事件
    const showModal = (allEventArr: any, targetKeyArr: any, idArr: any, abi_hash: string) => {
      setIsModalOpen(true);

      setEventList(allEventArr)
      setTargetKeys(targetKeyArr)
      setCurrIdArr(idArr)
      setCurrAbiHash(abi_hash)
    };

<Button
                  key="button"
                  disabled={selectedRows.length ? false : true}
                  onClick={() => {
                    batch_update_sub_event();
                  }}
                  type="primary"
                >
                  配置事件
                </Button>,

 

const handleBatchOk = () => {
      let idArr: any = []
      for ( let i = 0; i < selectedRows.length; i++ ) {
        idArr.push(selectedRows[i].id)
      }
      const params = {
        ids: idArr,
        abi: batchAbiValue,
      }
      setBatchModalLoading(true)

      action.contractBatchUpdateABI(params).then(() => {
        message.success('提交成功！')
        setIsBatchModalOpen(false);
        setBatchModalLoading(false);
        setBatchAbiValue('')
        setSelectedRows([]) // 重置
        actionRef.current?.reload();
      }).catch((err: any) => {
        setIsBatchModalOpen(false);
        setBatchModalLoading(false);
        console.log(err);
      })
    };
  
    const handleBatchCancel = () => {
      setIsBatchModalOpen(false)
    };

 

 

 

2，批量修改abi