## OPTable 表格组件

·API

| 参数       | 说明           | 类型   | 默认值 |
| ---------- | -------------- | ------ | ------ |
| dataSource | 表格数据       | Array  | []     |
| columns    | 表头           | Array  | []     |
| className  | 额外 classname | String | -      |

- 参数定义

```
export interface ColumnProps {
  key: string;
  align: 'left' | 'right' | 'center';
  width: number | string;
  title: string;
  name: string;
  render: any;
  options: object;
}

export interface TableProps {
  dataSource: ItemProps[];
  columns: ColumnProps[];
  className?: string;
  renders?: FunctionObjI;
  rowProps?: domType;
  cellProps?: domType;
  primaryKey?: string;
  selectedKeys?: (string | number)[];
  completeKeys?: string[];
  hasHeader?: boolean;
  onRowClick?: (item: ItemProps, index: number) => void;
  pagination?: PaginationProps;
  showSelect?: boolean; // 开启选择行
  rowSelection?: {
    useDetailValue?: boolean;
    defaultValue?: string | number | (string | number)[];
    type?: 'multiple' | 'single';
    selectedRowKeys?: string | number | (string | number)[];
    onCurrentPageChange?: (value: number) => void;
  };
  onPageChange?: (info: paginationInfo) => void;
  onSelectChange?: (
    keys: string | number | (string | number)[],
    record: ItemProps | ItemProps[],
  ) => void; // 选择行后的回调
}

```

- OPTable.renderMap.set

注册全局自定义渲染函数

```
OPTable.renderMap.set("abc", function(value, index, record, options){
  return value+"abc";
});
```

```jsx
import React, { useState } from 'react';
import ReactDOM from 'react-dom';
import { OPTable, OPLabel } from '../src/view';

const columns = [
  {
    key: 'itemCode',
    name: '运单号',
    render: 'code',
    width: '20%',
    align: 'right',
    options: {
      lenLimit: 10,
      hightlightNum: 6,
    },
  },
  { key: 'pkStatus', name: '包装状态', render: 'pkStatus' },
  { key: 'imgUrl', name: '图片', render: 'image', align: 'center' },
  {
    key: 'originalOrder',
    name: '原订单',
    render(value) {
      return value.slice(0, 10);
    },
  },
  { key: 'refuseReason', name: '拒收原因' },
  {
    key: 'receiveNum',
    name: '已收（件）',
    align: 'right',
  },
  {
    key: 'refuseNum',
    name: '拒收（件）',
    align: 'right',
  },
];

const dataSource = [
  {
    detailId: 9794215,
    itemCode: 'Barcode16597124109830490',
    pkStatus: '破损',
    refuseReason: '测试商品16597124109827417',
    originalOrder: 'Barcode16597124109830490',
    receiveNum: '0',
    refuseNum: '0',
    selected: true,
    tag: '新',
    imgUrl: 'https://petpress.net/wp-content/uploads/2019/10/samoyed-dog-1.jpg',
  },
  {
    detailId: 9794216,
    itemCode: 'Barcode16597124109830490',
    pkStatus: '破损',
    refuseReason: '测试商品16597124109827417',
    originalOrder: 'Barcode16597124109830490',
    receiveNum: '0',
    refuseNum: '0',
    selected: false,
    tag: '新',
  },
  {
    detailId: 9794217,
    itemCode: 'Barcode16597124109830490',
    pkStatus: '破损',
    refuseReason: '测试商品16597124109827417',
    originalOrder: 'Barcode16597124109830490',
    receiveNum: '0',
    refuseNum: '0',
    selected: false,
    tag: '新',
  },
  {
    detailId: 9794218,
    itemCode: 'Barcode16597124109830490',
    pkStatus: '破损',
    refuseReason: '测试商品16597124109827417',
    originalOrder: 'Barcode16597124109830490',
    receiveNum: '0',
    refuseNum: '0',
    selected: false,
    tag: '新',
  },
  {
    detailId: 9794219,
    itemCode: 'Barcode16597124109830490',
    pkStatus: '破损',
    refuseReason: '测试商品16597124109827417',
    originalOrder: 'Barcode16597124109830490',
    receiveNum: '0',
    refuseNum: '0',
    selected: false,
    tag: '新',
  },
];
const OpTableComponent = () => {
  const [tableData, setTableData] = useState(dataSource);
  const [currentPage, setCurrentPage] = useState(1); // 分页受控
  const [pageSize, setPageSize] = useState(10); // 每页显示的数量

  return (
    <>
      <div>
        <h1>基础表格</h1>
        <OPTable.Count
          dataSource={[
            {
              label: '完成数量',
              value: '1/6',
              balloon: {
                children: '完成数量提示',
              },
            },
            {
              label: '完成数量',
              value: '1/6',
              onClick: () => {
                alert(1);
              },
            },
          ]}
        ></OPTable.Count>
        <OPTable.Title>
          <div>
            运单号: <OPLabel label='123213213'></OPLabel>
          </div>
          <div>订单号: 12321321321</div>
        </OPTable.Title>
        <OPTable
          columns={columns}
          dataSource={dataSource}
          onRowClick={(item, index) => {
            alert(`你点击了第${index + 1}行`);
          }}
        ></OPTable>
        <OPTable.Group
          name='这是一个group'
          extra='extra字段'
          defaultVisable={true}
          indent={50}
          onClick={(v) => console.log(v)}
        >
          <OPTable columns={columns} dataSource={dataSource}></OPTable>
        </OPTable.Group>
      </div>
      <div>
        <h1>分页表格</h1>
        <OPTable
          columns={columns}
          dataSource={tableData}
          paginationConfig={{
            enabled: true,
            total: 100,
            onCurrentPageChange: (v) => {
              console.log(`你选中了第${v}页`);
            },
            onPageSizeChange: (v) => {
              console.log(`一页展示${v}条数据`);
            },
          }}
          onPageChange={(info) => {
            console.log('分页信息：', info);
          }}
        ></OPTable>
      </div>
      <div>
        <h1>可选择表格-单选</h1>
        <OPTable
          columns={columns}
          dataSource={tableData}
          showSelect
          primaryKey='detailId'
          rowSelection={{
            selectedRowKeys: 9794219,
            type: 'single',
          }}
          onSelectChange={(keys, records) => {
            console.log('行选择后的回调', keys, records);
          }}
        ></OPTable>
      </div>
      <div>
        <h1>可选择表格-多选</h1>
        <OPTable
          columns={columns}
          dataSource={tableData}
          showSelect
          primaryKey='detailId'
          rowSelection={{
            selectedRowKeys: [9794219],
          }}
          onSelectChange={(keys, records) => {
            console.log('行选择后的回调', keys, records);
          }}
        ></OPTable>
      </div>
    </>
  );
};
ReactDOM.render(<OpTableComponent />, mountNode);
```