Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

使用react技术栈实现懒加载功能,出现错列现象 #2086

Closed
gaomAndximi opened this issue Jul 14, 2024 · 1 comment
Closed

使用react技术栈实现懒加载功能,出现错列现象 #2086

gaomAndximi opened this issue Jul 14, 2024 · 1 comment
Assignees
Labels
bug Something isn't working

Comments

@gaomAndximi
Copy link

Version

1.5.1

Link to Minimal Reproduction

Steps to Reproduce

// import * as ReactVTable from '@visactor/react-vtable';
const generatePersons = i => {
return {
id: i + 1,
email1: ${i + 1}@xxx.com,
name: 小明${i + 1},
lastName: '王',
date1: '2022年9月1日',
tel: '000-0000-0000',
sex: i % 2 === 0 ? 'boy' : 'girl',
work: i % 2 === 0 ? 'back-end engineer' : 'front-end engineer',
city: 'beijing'
};
};

/**

  • 模拟接口请求数据
  • @param startIndex
  • @param num
  • @returns
    */
    const getRecordsWithAjax = (startIndex, num) => {
    // console.log('getRecordsWithAjax', startIndex, num);
    return new Promise(resolve => {
    setTimeout(() => {
    console.log('getRecordsWithAjax', startIndex, num);
    const records = [];
    for (let i = 0; i < num; i++) {
    records.push(generatePersons(startIndex + i));
    }
    resolve(records);
    }, 2000);
    });
    };

// create DataSource
const loadedData = {};
const dataSource = new VTable.data.CachedDataSource({
get(index) {
// 每一批次请求100条数据 0-99 100-199 200-299
const loadStartIndex = Math.floor(index / 100) * 100;
// 判断是否已请求过?
if (!loadedData[loadStartIndex]) {
const promiseObject = getRecordsWithAjax(loadStartIndex, 100); // return Promise Object
loadedData[loadStartIndex] = promiseObject;
}
return loadedData[loadStartIndex].then((data) => {
return data[index - loadStartIndex]; //获取批次数据列表中的index对应数据
});
},
length: 10000 //all records count
});
const columns = [
{
field: 'id',
title: 'ID',
width: 120
// sort: true
},
];
const option = {
columns,
widthMode:'adaptive',
autoWrapText:true,
heightMode:'autoHeight',
rowSeriesNumber: {
title: '序号',
width: 'auto',
headerStyle: {
color: 'black',
bgColor: 'pink'
},
style: {
color: 'red'
}
}
};

const root = ReactDom.createRoot(document.getElementById(CONTAINER_ID));
root.render(<ReactVTable.ListTable option={option} height={'500px'}
onReady={(tableInstance, isFirst) => {
tableInstance.dataSource = dataSource
}}/>);

// release openinula instance, do not copy
window.customRelease = () => {
root.unmount();
};

Current Behavior

微信图片_20240714112223
复现步骤:
1.加载时候,迅速将滚动条滚到底部
2.再慢慢向上滚动鼠标

Expected Behavior

期望实现懒加载

Environment

- OS:
- Browser:
- Framework:

Any additional comments?

No response

@gaomAndximi gaomAndximi added the bug Something isn't working label Jul 14, 2024
@Rui-Sun
Copy link
Contributor

Rui-Sun commented Jul 16, 2024

懒加载不支持自适应宽度和自适应高度,相关配置去掉应该就可以了

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something isn't working
Projects
None yet
Development

No branches or pull requests

2 participants