113 lines
3.0 KiB
Markdown
113 lines
3.0 KiB
Markdown
|
---
|
|||
|
|
name: jjb-table-scroll-height
|
|||
|
|
description: 定义 JJB 项目表格滚动高度规范。在使用 AntdTableFuncControl、Connect 装饰器、scrollY 或表格滚动时使用。
|
|||
|
|
---
|
|||
|
|
|
|||
|
|
# 表格（Table）规范
|
|||
|
|
|
|||
|
|
## 表格滚动高度
|
|||
|
|
|
|||
|
|
- 使用 `antd/Table` 的页面组件 **必须** 使用 `AntdTableFuncControl` 装饰器
|
|||
|
|
|
|||
|
|
- `AntdTableFuncControl` 用于为表格组件提供自动计算滚动高度的功能
|
|||
|
|
|
|||
|
|
- **导入方式**：
|
|||
|
|
|
|||
|
|
```javascript
|
|||
|
|
import { AntdTableFuncControl } from '@cqsjjb/jjb-common-decorator/antd';
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
- **使用方式**：与 `Connect` 装饰器组合使用，`AntdTableFuncControl` 作为内层装饰器
|
|||
|
|
|
|||
|
|
```javascript
|
|||
|
|
export default Connect([NS_BASIC], true)(AntdTableFuncControl(Field));
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
- **注入的 Props**：
|
|||
|
|
|
|||
|
|
- `scrollY`：自动计算的表格滚动高度，可直接用于 Table 组件的 `scroll.y` 配置
|
|||
|
|
|
|||
|
|
### 代码演示
|
|||
|
|
|
|||
|
|
```jsx
|
|||
|
|
import React, { useState, useEffect, useRef } from 'react';
|
|||
|
|
import { Connect } from '@cqsjjb/jjb-dva-runtime';
|
|||
|
|
import { AntdTableFuncControl } from '@cqsjjb/jjb-common-decorator/antd';
|
|||
|
|
import { Table } from 'antd';
|
|||
|
|
import { NS_BASIC } from '~/enumerate/namespace';
|
|||
|
|
|
|||
|
|
const Field = ({
|
|||
|
|
basicInfo: {
|
|||
|
|
fieldLoading,
|
|||
|
|
fieldList = [],
|
|||
|
|
fieldListTotal
|
|||
|
|
} = {},
|
|||
|
|
getFieldList,
|
|||
|
|
scrollY // AntdTableFuncControl 注入的滚动高度
|
|||
|
|
}) => {
|
|||
|
|
const [pageObj, setPageObj] = useState({
|
|||
|
|
pageIndex: 1,
|
|||
|
|
pageSize: 10
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
useEffect(() => {
|
|||
|
|
getFieldList({
|
|||
|
|
...pageObj
|
|||
|
|
});
|
|||
|
|
}, [pageObj]);
|
|||
|
|
|
|||
|
|
return (
|
|||
|
|
<Table
|
|||
|
|
rowKey="id"
|
|||
|
|
scroll={{
|
|||
|
|
y: scrollY - 16 // 使用注入的 scrollY，减去间距
|
|||
|
|
}}
|
|||
|
|
loading={fieldLoading}
|
|||
|
|
columns={[
|
|||
|
|
{
|
|||
|
|
title: '名称',
|
|||
|
|
dataIndex: 'name',
|
|||
|
|
key: 'name'
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
title: '编码',
|
|||
|
|
dataIndex: 'code',
|
|||
|
|
key: 'code'
|
|||
|
|
}
|
|||
|
|
]}
|
|||
|
|
pagination={{
|
|||
|
|
total: fieldListTotal,
|
|||
|
|
current: pageObj.pageIndex,
|
|||
|
|
pageSize: pageObj.pageSize,
|
|||
|
|
onChange: (pageIndex, pageSize) => {
|
|||
|
|
setPageObj({
|
|||
|
|
pageSize,
|
|||
|
|
pageIndex
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
}}
|
|||
|
|
dataSource={fieldList}
|
|||
|
|
/>
|
|||
|
|
);
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
// AntdTableFuncControl 作为内层装饰器，Connect 作为外层装饰器
|
|||
|
|
export default Connect([NS_BASIC], true)(AntdTableFuncControl(Field));
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
### 使用要点
|
|||
|
|
|
|||
|
|
1. **装饰器顺序**：`AntdTableFuncControl` 必须作为内层装饰器，`Connect` 作为外层装饰器
|
|||
|
|
|
|||
|
|
2. **scrollY 使用**：`scrollY` 会自动根据页面布局计算，通常需要减去一定的间距（如 16px）以适应页面布局
|
|||
|
|
|
|||
|
|
3. **必须使用场景**：所有使用 `antd/Table` 的页面组件都必须使用此装饰器，以确保表格滚动高度正确计算
|
|||
|
|
|
|||
|
|
### 注意事项
|
|||
|
|
|
|||
|
|
- `scrollY` 的值会根据页面布局自动计算，无需手动设置
|
|||
|
|
|
|||
|
|
- 如果表格上方有其他元素（如搜索表单、标题等），`scrollY` 会自动考虑这些元素的高度
|
|||
|
|
|
|||
|
|
- 禁止在组件内部手动计算或设置表格滚动高度，必须使用 `AntdTableFuncControl` 提供的 `scrollY`
|