Antd Design Pro Components ProTable批量操作获取当前选中的key

原创

已于 2022-10-22 17:17:50 修改 · 5k 阅读

标签

#typescript #javascript #react.js

收录于

于 2021-12-22 11:30:22 首次发布

Antd Design Pro Components 是基于Antd Design 提供的一些高级功能的组件。以下是一个hooks + TS + Antd ProTable中获取选中的key的demo：

修改评论区的问题，谢谢不吝赐教～
1. 表格开启checkbox配置：rowSelection={rowSelection}

<ProTable<videoList>
	......
    rowSelection={
   
   rowSelection}
    // 行键 这里设置什么 rowSelection获取的就是对应的值 比如：rowKey="id", 输出的[1, 2, 3, 4]
    rowKey="id"
 />

2. 获取选中的key的hook：useRowSelection.ts

import {
   
    Key, useState } from "react";

export const useRowSelection = () => {
   
   
  const [selectedRowKeys, setSelectedRowKeys] = useState<Key[]>([]);

  const onChange = (value: Key[]) => {
   
   
    setSelectedRowKeys(value)
  }
  
  return [
    {
   
   
      rowSelection: selectedRowKeys,
      onChange: onChange,
    },
    {
   
   
      selectedRowKeys
    }
  ]
};

3. 完整的 demo.tsx

import {
   
    useRowSelection } from '@/utils/hooks/useRowSelection';
import {
   
   
  ActionType,
  PageContainer,
  ProColumns,
  ProTable,
} from