---
title: 复杂表格
order: 1
---

复杂表格

```jsx
import React, { Component } from "react";
import ReactDOM from "react-dom";
import "@alifd/next/dist/next.css";
import "@alifd/meet-react/dist/meet-react.min.css"; // 按需 引入无线主题
import { Select,Input,DatePicker } from '@alifd/next';
import OcTable from "@alicd/oc-table";

const columns = [
    {
      title: '姓名',
      dataIndex: 'name.last',
      width: 140,
      lock: 'left',
    },
    {
      title: '性别',
      dataIndex: 'gender',
      width: 140,
    },
    {
      title: '邮箱',
      dataIndex: 'email',
      width: 300,
    },
    {
      title: '电话',
      dataIndex: 'phone',
      width: 300,
    },
    {
      title: '所在国家',
      dataIndex: 'location.country',
      width: 240,
    },
    {
      title: '所在城市',
      dataIndex: 'location.city',
      width: 240,
    },
  ];

class App extends Component {
  render() {
    return (
      <div>
        <OcTable
          columns={columns}
          primaryKey={'id.value'}
          onReset={(reset) => {
            console.log('执行重置');
            reset();
          }}
          filterBar={[
            {
              name: 'gender',
              label: '性别',
              defaultValue: 'all',
              required: true,
              quick: true,
              children: (
                <Select
                  dataSource={[
                    { label: 'All', value: 'all' },
                    { label: '男', value: 'male' },
                    { label: '女', value: 'female' },
                  ]}
                />
              ),
            },
            {
              name: 'name.last',
              label: '姓名',
              children: <Input />,
            },
            {
              name: 'age',
              label: '年龄',
              children: <Input />,
            },
            {
              name: 'email',
              label: '邮箱',
              children: <Input />,
            },
            {
              name: 'country',
              label: '国家',
              defaultValue: [],
              quick: true,
              children: (
                <Select
                  mode="multiple"
                  dataSource={[
                    { label: '中国', value: 'CH' },
                    { label: '日本', value: 'JP' },
                  ]}
                />
              ),
            },
            {
              name: 'time',
              colSpan: 6,
              label: '时间范围选择器',
              // @ts-ignore
              children: <DatePicker.RangePicker />,
            },
          ]}
          actionColumn={[
            {
              title: '编辑',
              icon: 'edit',
              onClick: ({ value, index, record }) => console.log('编辑操作', value, index, record),
            },
            {
              title: '删除',
            },
            {
              title: '核销',
            },
          ]}
          actionBar={[
            {
              title: '新增',
              type: 'primary',
              icon: 'add',
              onClick: () => console.log('新增操作'),
            },
            {
              title: '导入数据',
            },
            {
              icon: 'download',
              title: '下载导入模版',
            },
            {
              render: <div>自定义渲染内容</div>,
            },
          ]}
          getListUri={'https://randomuser.me/api'}
          // getListHandle={(pageInfo) => {
          //   return getTableData(pageInfo);
          // }}
        />
      </div>
    );
  }
}

ReactDOM.render(<App />, mountNode);
```