[Feature] 表格的滚动性能有问题，滚动条严重卡顿

[sfeng95]

What problem does this feature solve?

表格的滚动性能有问题，滚动条严重卡顿

What does the proposed API look like?

表格的滚动性能有问题，滚动条严重卡顿

[fangsmile]

可以提供下你的demo吗 我们这边测试下 看看问题在哪里 @sfeng95

[sfeng95]

很感谢你的帮助！！！！！ 这是设置样式的demo let theme: any = vTable.themes.ARCO.extends({ underlayBackgroundColor: "#ffffff", cellInnerBorder: false, frameStyle: { borderColor: "#ffffff", borderLineWidth: 0, borderLineDash: [], cornerRadius: 0, shadowBlur: 0, shadowOffsetX: 0, shadowOffsetY: 0, }, headerStyle: { color: "#606266", bgColor: "#f8f8f8", fontSize: 12, fontVariant: "normal", fontWeight: 0, lineHeight: 20, borderColor: "#f5f5f5", padding: [8, 8, 8, 8], hover: { cellBgColor: "#c8daf6" } }, bodyStyle: { padding: [8, 8, 8, 8], color: "#606266", fontSize: 12, fontWeight: 0, fontVariant: "normal", textAlign: "left", underline: false, lineThrough: false, textBaseline: "middle", borderColor: "#f5f5f5", borderLineWidth: 1, lineHeight: 20, hover: { cellBgColor: "#dedede00", inlineRowBgColor: "#dedede00", inlineColumnBgColor: "#dedede00" } }, selectionStyle: { cellBgColor: "#0074ff63", cellBorderColor: "#dedede00", cellBorderLineWidth: 0, }, cornerHeaderStyle: { bgColor: "#f8f8f8", }, scrollStyle: { hoverOn: false, scrollSliderCornerRadius: 0, width: 10, visible: "always",//配置滚动条是否可见，可配值：'always' | 'scrolling' | 'none' | 'focus'，分别对应：常驻显示|滚动时显示|显示|聚焦在画布上时。默认为‘scrolling’。 barToSide: true } }); 这是设置的参数 let option: any = { clearDOM: true, editCellTrigger: 'click', theme: theme, dragHeaderMode: 'column', records: [], columns: [], widthMode: "standard", defaultRowHeight: 25, defaultHeaderRowHeight: [25, 25], autoFillHeight: false, limitMaxAutoWidth: 200, maxWidth: 200, minWidth: 50, autoFillWidth: true, frozenColCount: 0, overscrollBehavior: 'auto', keyboardOptions: { moveEditCellOnArrowKeys: true, copySelected: true, pasteValueToCell: true }, columnResizeMode: 'header', rowSeriesNumber: { minWidth: 12, maxWidth: 12, title: '', width: 12, bgColor: "#f5f5f5", dragOrder: false, disableColumnResize: true, format: () => { return ""; } }, customCellStyle: [ { id: 'edited', style: { bgColor: '#ff51d117' } }, { id: 'deled', style: { bgColor: '#ffe25185' } }, { id: 'added', style: { bgColor: '#78dc7599' } }, ], // editor: '' // 配置一个空的编辑器，以遍能粘贴到单元格中 };

这是设置列的代码 for (let index = 0; index < cols.length; index++) { let col = cols[index]; if (col.COLUMN_KEY == 'PRI') { primaryName.value = col.COLUMN_NAME; primaryKey.value = index; } let textAlign = "right"; let dataType: string = col.DATA_TYPE; if (MysqlTextType.includes(dataType)) { textAlign = "left"; } columns.value.push({ field: col.COLUMN_NAME, dataType: col.DATA_TYPE, title: col.COLUMN_NAME, width: "auto", editor: 'input-editor', style: { textAlign: textAlign, }, }) } let data: any = res[1]; records.value = data[0].resultSet.rows; dataSheetRef.value?.initDataSheets(columns.value, records.value);

这是使用的代码 option.records = records; option.columns = columns; listTableInstance.value = new vTable.ListTable(listTableRef.value, option);

[fangsmile]

可以用插入代码的格式哈 这样复制出来识别不了的。 你给一段完整的代码就可以 ，直接复制你的代码可以在官网上复现的例子

[sfeng95]

可以用插入代码的格式哈 这样复制出来识别不了的。 你给一段完整的代码就可以 ，直接复制你的代码可以在官网上复现的例子 我发现是两个原因导致的 第一：数据列太宽字段太多，里面的数据文本太长，导致它垂直滚动起来很卡顿，这个问题很多js表格都有，不知怎么优化 第二：JCEF嵌套的浏览器性能不如谷歌，但是这不是全部原因

[sfeng95]

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 < 10000; 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(10000); 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: 500, }, { 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 }; const tableInstance = new VTable.ListTable(document.getElementById(CONTAINER_ID),option); window['tableInstance'] = tableInstance;

通过demo证明，其实主要是JCEF性能卡顿问题导致的