---
name: jjb-table-basic
description: 定义 JJB 项目表格基础规范。在使用 antd/Table 或配置表格 loading 时使用。
---

# 表格（Table）规范

## 表格基础

- 使用 `antd/Table`
- 通过接口获取数据的 Table **必须** 有 loading 效果

## AntdTableFuncControl（必选）

所有列表页 **必须** 使用 `AntdTableFuncControl` HOC 包裹组件，以自动计算表格滚动高度 `scrollY`：

```javascript
import { AntdTableFuncControl } from "@cqsjjb/jjb-common-decorator/antd";

// Table 中使用
<Table scroll={{ y: props.scrollY }} ... />

// 导出时包裹
export default AntdTableFuncControl(MyComponent);
```

若同时使用 Connect，HOC 顺序：`Connect(...)(AntdTableFuncControl(Component))`

## 列表页数据流（router.query 模式）

**禁止** 使用 `zy-react-library` 的 `useTable` hook。必须手动管理数据状态：

```jsx
import { tools } from "@cqsjjb/jjb-common-lib";

const { router } = tools;

function ListPage(props) {
  const [form] = Form.useForm();
  const [loading, setLoading] = useState(false);
  const [dataSource, setDataSource] = useState([]);
  const [total, setTotal] = useState(0);

  const getData = async () => {
    setLoading(true);
    try {
      const params = {
        ...router.query,
        current: router.query.current || 1,
        size: router.query.size || 10,
      };
      const res = await props.xxxList(params);
      if (res?.success !== false) {
        setDataSource(res?.data?.records || res?.data || []);
        setTotal(res?.data?.total || 0);
      }
    } catch (err) {
      console.warn(err);
    } finally {
      setLoading(false);
    }
  };

  useEffect(() => {
    form.setFieldsValue(router.query);
    getData();
  }, []);

  return (
    <PageLayout title="标题">
      <SearchForm
        form={form}
        loading={loading}
        onReset={(values) => {
          router.query = { ...router.query, ...values, current: 1, pageSize: 10 };
          getData();
        }}
        onFinish={(values) => {
          router.query = { ...router.query, ...values, current: 1, pageSize: 10 };
          getData();
        }}
        ...
      />

      <Table
        rowKey="id"
        columns={...}
        dataSource={dataSource}
        loading={loading}
        scroll={{ y: props.scrollY }}
        pagination={{
          total,
          showSizeChanger: true,
          showQuickJumper: true,
          showTotal: (t) => `共 ${t} 条`,
          current: router.query.current || 1,
          pageSize: router.query.size || 10,
          onChange: (page, pageSize) => {
            router.query = { ...router.query, current: page, size: pageSize };
            getData();
          },
        }}
      />
    </PageLayout>
  );
}

export default AntdTableFuncControl(ListPage);
```

## 上传组件

使用 antd 原生 `Upload`，**禁止** 使用 `zy-react-library` 的 `Upload` 组件。

## 禁止使用的 zy-react-library 组件

以下 `zy-react-library` 组件在列表页中 **禁止使用**，必须替换为项目规范组件：

| 禁止 | 替换为 |
|------|--------|
| `Search` | `SearchForm` + `ControlWrapper` |
| `Table` + `useTable` | antd `Table` + `AntdTableFuncControl` + 手动管理数据 |
| `Upload` | antd `Upload` |