Closed gaomAndximi closed 1 month ago
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
懒加载不支持自适应宽度和自适应高度,相关配置去掉应该就可以了
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' }; };/**
// 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
Expected Behavior
期望实现懒加载
Environment
Any additional comments?
No response