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.3.2
在demo中添加如下 代码 https://visactor.io/vtable/demo/performance/100W?version=1.3.2
ps: 核心部分 option-> customMergeCell->customRender
function generateRandomString(length) { let result = ''; const characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz'; for (let i = 0; i < length; i++) { result += characters.charAt(Math.floor(Math.random() * characters.length)); } return result; } function generateRandomHobbies() { const hobbies = [ 'Reading books', 'Playing video games', 'Watching movies', 'Cooking', 'Hiking', 'Traveling', 'Photography', 'Playing musical instruments', 'Gardening', 'Painting', 'Writing', 'Swimming' ]; const numHobbies = Math.floor(Math.random() * 3) + 1; // 生成 1-3 之间的随机整数 const selectedHobbies = []; for (let i = 0; i < numHobbies; i++) { const randomIndex = Math.floor(Math.random() * hobbies.length); const hobby = hobbies[randomIndex]; selectedHobbies.push(hobby); hobbies.splice(randomIndex, 1); // 确保每个爱好只选一次 } return selectedHobbies.join(', '); } function generateRandomBirthday() { const start = new Date('1970-01-01'); const end = new Date('2000-12-31'); const randomDate = new Date(start.getTime() + Math.random() * (end.getTime() - start.getTime())); const year = randomDate.getFullYear(); const month = randomDate.getMonth() + 1; const day = randomDate.getDate(); return `${year}-${month < 10 ? '0' + month : month}-${day < 10 ? '0' + day : day}`; } function generateRandomPhoneNumber() { const areaCode = ['130', '131', '132', '133', '134', '135', '136', '137', '138', '139', '150', '151', '152', '153', '155', '156', '157', '158', '159', '170', '176', '177', '178', '180', '181', '182', '183', '184', '185', '186', '187', '188', '189']; const prefix = areaCode[Math.floor(Math.random() * areaCode.length)]; const suffix = String(Math.random()).substr(2, 8); return prefix + suffix; } const generatePersons = (count) => { return Array.from(new Array(count)).map((_, i) => { const first=generateRandomString(10); const last=generateRandomString(4); return { id: i+1, email1: `${first}_${last}@xxx.com`, name: first, lastName: last, hobbies: generateRandomHobbies(), birthday: generateRandomBirthday(), tel: generateRandomPhoneNumber(), sex: i % 2 === 0 ? 'boy' : 'girl', work: i % 2 === 0 ? 'back-end engineer' : 'front-end engineer', city: 'beijing', }}); }; const records = generatePersons(20); const columns = [ { field: 'id', title: 'ID', width: 80, sort: true, }, { field: 'email1', title: 'email', width: 250, sort: false, }, { field: 'full name', title: 'Full name', columns: [ { field: 'name', title: 'First Name', width: 120, }, { field: 'lastName', title: 'Last Name', width: 100, }, ], }, { field: 'hobbies', title: 'hobbies', width: 200, }, { field: 'birthday', title: 'birthday', width: 120, }, { field: 'sex', title: 'sex', width: 100, }, { field: 'tel', title: 'telephone', width: 150, }, { field: 'work', title: 'job', width: 200, }, { field: 'city', title: 'city', width: 150, }, ]; const option = { records, columns, customMergeCell: (col, row, table) => { if (col === table.colCount - 1 && row > 0) { // 最后一列 return { text: ' ', range: { start: { row: 1, col: table.colCount - 1, }, end: { row: table.rowCount - 1, col: table.colCount - 1, }, }, style: { bgColor: 'white', borderLineWidth: [1, 0, 0, 1], }, customRender: () => ({ elements: [{ type: 'rect', stroke: '#000', fill: 'blue', x: 0, y: 0, width: 10, height: 10 }] }), }; } }, }; const tableInstance = new VTable.ListTable(document.getElementById(CONTAINER_ID),option); tableInstance.on('scroll_vertical_end',()=>{ tableInstance.addRecords(generatePersons(10)); console.log('追加页数据'); }); window['tableInstance'] = tableInstance;
页面卡顿 cpu占比过高
正常显示,cpu占用控制在合理范围内
- OS: mac - Browser: chrome - Framework: react@18
No response
The text was updated successfully, but these errors were encountered:
fix: fix merge cell update performance problem #1972
4825045
Rui-Sun
No branches or pull requests
Version
1.3.2
Link to Minimal Reproduction
1.3.2
Steps to Reproduce
在demo中添加如下 代码
https://visactor.io/vtable/demo/performance/100W?version=1.3.2
ps: 核心部分 option-> customMergeCell->customRender
Current Behavior
页面卡顿
cpu占比过高
Expected Behavior
正常显示,cpu占用控制在合理范围内
Environment
Any additional comments?
No response
The text was updated successfully, but these errors were encountered: