carefree-antd-transfer

依赖安装

 npm i carefree-antd-transfer

参数

| 参数 | 说明 | 类型 | | :--------------- | :---------------------- | :------------------------------------------------------------------------------------------------------------------------------------- | | rowKey | 列表主键 | string | | columns | 列表 | TableGroupProps['columns'] | | leftConfig | 左侧表格配置 | Omit<TableGroupProps, 'columns' \| 'rowKey' \| 'dataSource'> | | leftSelected | 左侧选中数据 | { selectedRowKeys?: React.Key[]; selectedRows?: any[] } | | leftDataSource | 左侧数据源 | readonly any[] | | rightConfig | 右侧侧表格配置 | Omit<TableGroupProps, 'columns' \| 'rowKey' \| 'dataSource'> | | rightSelected | 右侧选中数据 | { selectedRowKeys?: React.Key[]; selectedRows?: any[] } | | rightDataSource | 右侧数据源 | readonly any[] | | pagination | 公共 pagination 属性 | TableGroupProps['pagination'] | | handlePagination | 分页 | (page: number,pageSize: number, type: 'left' \| 'right',)=>void | | handleSelected | 选中 | ( selectedRowKeys: React.Key[], selectedRows: any[], type: 'left' \| 'right',)=>void | | handleOperation | 中间操作方法 | (leftList: readonly any[], rightList: readonly any[], selectedRowKeys: React.Key[], selectedRows: any[], type: OperationType,)=>void | | isQuote | 数据源只是引用 不做其他 | boolean |

ref 返回值

| 参数 | 说明 | 类型 | | :--------------- | :------------- | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | store | 内部状态存储值 | { leftSelected: TransferProps['leftSelected'],rightSelected: TransferProps['leftSelected'], leftPagination: { page: number; pageSize: number }, rightPagination: { page: number; pageSize: number },leftList: readonly any[],rightList: readonly any[]} | | setStore | 列表 | React.Dispatch<React.SetStateAction<TransferRef['store']>> | | handlePagination | 分页 | (page: number,pageSize: number, type: 'left' \| 'right',)=>void | | handleSelected | 选中 | ( selectedRowKeys: React.Key[], selectedRows: any[], type: 'left' \| 'right',)=>void | | handleOperation | 中间操作方法 | (type: OperationType)=>void |

export type OperationType = 'add' | 'allAdd' | 'delete' | 'allDelete';

export interface TransferProps {
  /** 列表主键 */
  rowKey: string;
  /** 列表 */
  columns: TableGroupProps['columns'];
  /** 左侧表格配置 */
  leftConfig?: Omit<TableGroupProps, 'columns' | 'rowKey' | 'dataSource'>;
  /** 左侧选中数据 */
  leftSelected?: { selectedRowKeys?: React.Key[]; selectedRows?: any[] };
  /** 左侧数据源 */
  leftDataSource: readonly any[];
  /** 右侧侧表格配置 */
  rightConfig?: Omit<TableGroupProps, 'columns' | 'rowKey' | 'dataSource'>;
  /** 右侧选中数据 */
  rightSelected?: { selectedRowKeys?: React.Key[]; selectedRows?: any[] };
  /** 右侧数据源 */
  rightDataSource: readonly any[];
  /** 公共 pagination属性 */
  pagination?: TableGroupProps['pagination'];
  /** 分页 */
  handlePagination?: (
    page: number,
    pageSize: number,
    type: 'left' | 'right',
  ) => void;
  /** 选中  */
  handleSelected?: (
    selectedRowKeys: React.Key[],
    selectedRows: any[],
    type: 'left' | 'right',
  ) => void;
  /** 中间操作方法 */
  handleOperation?: (
    leftList: readonly any[],
    rightList: readonly any[],
    selectedRowKeys: React.Key[],
    selectedRows: any[],
    type: OperationType,
  ) => void;
  /** 数据源只是引用 不做其他 */
  isQuote?: boolean;
}

export interface TransferRef {
  /** 内部状态存储值 */
  store: {
    /** 左侧选中数据 */
    leftSelected: TransferProps['leftSelected'];
    /** 右侧选中数据 */
    rightSelected: TransferProps['leftSelected'];
    /** 左侧分页数据 */
    leftPagination: { page: number; pageSize: number };
    /** 右侧侧分页数据 */
    rightPagination: { page: number; pageSize: number };
    /** 左侧数据源 */
    leftList: readonly any[];
    /** 右侧数据源 */
    rightList: readonly any[];
  };
  setStore: React.Dispatch<React.SetStateAction<TransferRef['store']>>;
  /** 选中方法 */
  handleSelected: (
    selectedRowKeys: React.Key[],
    selectedRows: any[],
    type: 'left' | 'right',
  ) => void;
  /** 分页方法 */
  handlePagination: (
    page: number,
    pageSize: number,
    type: 'left' | 'right',
  ) => void;
  /** 中间操作方法 */
  handleOperation: (type: OperationType) => void;
}

案例

import React from 'react';
import Transfer from 'carefree-antd-transfer';

export default () => (
  <div>
    <Transfer
      leftDataSource={[
        { a: '测试1', b: '测试21', id: 1 },
        { a: '测试2', b: '测试211', id: 2 },
        { a: '测试3', b: '测试212', id: 3 },
        { a: '测试4', b: '测试213', id: 4 },
        { a: '测试1', b: '测试21', id: 11 },
        { a: '测试2', b: '测试211', id: 22 },
        { a: '测试3', b: '测试212', id: 33 },
        { a: '测试4', b: '测试213', id: 44 },
        { a: '测试1', b: '测试21', id: 111 },
        { a: '测试2', b: '测试211', id: 222 },
        { a: '测试3', b: '测试212', id: 333 },
        { a: '测试4', b: '测试213', id: 444 },
        { a: '测试1', b: '测试21', id: 1111 },
        { a: '测试2', b: '测试211', id: 2222 },
        { a: '测试3', b: '测试212', id: 3333 },
        { a: '测试4', b: '测试213', id: 4444 },
      ]}
      rightDataSource={[
        { a: '测试5', b: '测试215', id: 5 },
        { a: '测试6', b: '测试2116', id: 6 },
        { a: '测试7', b: '测试2127', id: 7 },
        { a: '测试8', b: '测试2138', id: 8 },
      ]}
      rowKey="id"
      columns={[
        {
          dataIndex: 'a',
          title: '标题',
          align: 'center',
        },
        {
          dataIndex: 'b',
          title: '标3',
          align: 'center',
        },
      ]}
    />
  </div>
);