We read every piece of feedback, and take your input very seriously.
To see all available qualifiers, see our documentation.
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
1.5.1
无
// 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' }; };
${i + 1}@xxx.com
小明${i + 1}
/**
// 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(); };
复现步骤: 1.加载时候,迅速将滚动条滚到底部 2.再慢慢向上滚动鼠标
期望实现懒加载
- OS: - Browser: - Framework:
No response
The text was updated successfully, but these errors were encountered:
懒加载不支持自适应宽度和自适应高度,相关配置去掉应该就可以了
Sorry, something went wrong.
Rui-Sun
No branches or pull requests
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'
};
};
/**
*/
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
复现步骤:
1.加载时候,迅速将滚动条滚到底部
2.再慢慢向上滚动鼠标
Expected Behavior
期望实现懒加载
Environment
Any additional comments?
No response
The text was updated successfully, but these errors were encountered: