🐛编辑表在分页情况下, 其中一页某行某列单元格编辑完成后，在翻到其它页时，其它页相同行相同列的单元格都是同样数据。 #3208
Description
🏷 S2 Version / S2 版本
| Package | Version |
|---|---|
| @antv/s2 | 2.4.3 |
| @antv/s2-react | 2.2.2 |
| @antv/s2-react-components |
💻 Sheet Type / 表格类型
- EditableSheet
🖋 Describe the bug / 问题描述
在S2React 表单组件使用中， sheetType 为'editable'， 采用分页方式，在当前分页(例如第1页)中 编辑其个单元格值(例如第1列第8行单元格)为A，然后向下翻后， 在表格显示中，每一页的 第1列第8行单元格 都A，实际检查 dataCfg中该第1列第8行单元格不是A。
⌨️ Code Snapshots / 代码片段
/** 导入依赖 */
const { useState, useEffect, useRef,useCallback } = React
const { SheetComponent } = S2React;
const { Pagination} = antd;
/** 使用S2-React 2.2.2版本 */
const S2TableWithRemotePagination = () => {
/** 初始化及更新数据定义 */
const [currentPage, setCurrentPage] = useState(1);
const [pageSize, setPageSize] = useState(initSize);
const [total, setTotal] = useState(0);
const [data, setData] = useState([]);
const [loading, setLoading] = useState(false);
/** 远程获取并解析表单数据，更新到S2数据源 */
const fetchData = async (page, size) => {
setLoading(true);
/**获取远程数据 */
try {
const res = await dataSourceMap['searchFormDatas'].load(params)
.then(res => res)
.catch(err => console.log(err));
/** 解析数据 */
const { data, totalCount: total } = res || {};
/** 解析api返回数据 */
const tableData = data.map(item => {
//省略
}
})
setData(tableData);
setTotal(total);
} finally {
setLoading(false);
}
};
// 页面加载或页码/每页数量变化时触发请求
useEffect(() => {
console.log('开始加载第', currentPage, '页，每页', pageSize, '条');
fetchData(currentPage, pageSize);
}, [currentPage, pageSize]);
// 判断是否为移动端
const isMobile = () => {
return window.innerWidth < 768;
};
// 构造 S2 表格配置
const s2Options = {
width: isMobile() ? window.innerWidth - 32 : 1100,
editable: true,
height: 600,
seriesNumber: {
enable: true
},
};
/** 获取当前表格的实时数据 */
const s2Ref = React.useRef()
const getData = () => {
if (s2Ref.current) {
const data = s2Ref.current.dataSet.displayData;
console.log('当前表格数据:', data);
}
};
return (
<div >
{/* 加载 S2React 表格 */}
<Button type="primary" onClick={getData}>
点我
</Button>
<SheetComponent
dataCfg={{
fields: {
rows: ['seriesNumber'],
columns: columns.map(item => { return item.field }),
values: [],
},
data,
meta: [ // 略 ]
}}
options={s2Options}
themeCfg={{ name: 'default' }}
sheetType="editable"
ref={s2Ref}
/>
{/* 加载antd分页组件 */}
<div style={{ marginTop: 16, textAlign: 'center' }}>
<Pagination
current={currentPage}
pageSize={pageSize}
total={total}
onChange={(page, size) => {
console.log('当前表格数据:', s2Ref.current);
setCurrentPage(page);
setPageSize(size);
}}
showSizeChanger
showQuickJumper
showTotal={total => `共${total}页`}
/>
</div>
</div>
);
};
// 渲染到 DOM 容器中
const container = document.getElementById('S2Container');
if (container) {
ReactDOM.render(<S2TableWithRemotePagination />, container);
} else {
console.error('未找到 id 为 container 的容器元素');
}
🔗 Reproduction link / 复现链接
No response
📋 Steps to Reproduce the Bug or Issue / 重现步骤
1、使用场景为钉钉宜搭的自定义页面中引入 S2react V2.2.2版及相应css文件
2、采用antd 分页组件联合 S2React 的SheetComponent 形成分页+ 表单
3、设置sheetType为 editable
4、第一页 第1列第8行 单元格 使用编辑功能，修改为 A
5、然后翻页至 第2页， 此时 第二页的页面呈现 第1列第8行 单元格 显示值 也为”A",
6、查第2页的 dataCfg 中 该第1列第8行单元格实际值 不是A。
7、往前和往后翻页都是这全现象。
😊 Expected Behavior / 期望行为
期望：
任何一个单元格编辑完成后，在翻页或 滚动情况下，相同位置的值 应该有变化。
😅 Current Behavior / 当前行为
💻 OS / 操作系统
- macOS
- Windows
- Linux
- Others / 其他
🌏 Browser / 浏览器
- Chrome
- Edge
- Firefox
- Safari (Limited support / 有限支持)
- IE (Nonsupport / 不支持)
- Others / 其他