如何解决表数据复制后高亮效果交替出现的问题？
在数据操作过程中，确保用户能够清晰地看到操作结果至关重要。目前的系统中，用户在点击菜单切换表数据并复制数据后，通过执行copycell方法进行数据复制，随后通过getdata方法获取新的表数据。然而，第一次复制数据后，高亮效果并未按预期显示，而是在第二次复制时才出现，之后的高亮效果显示与否呈现出交替的模式。本文将探讨如何解决这一高亮效果交替出现的问题。
根据提供的代码，复制操作和高亮显示的逻辑主要集中在copyCell和scrollToRow方法中。特别是scrollToRow方法负责处理跳转到指定页面并为对应行添加高亮样式。以下是经过调整的scrollToRow方法，通过这些修改，我们希望能够解决高亮效果的交替问题：
const scrollToRow = (rowKey) => { const row = dataSource.value.find((row) => row["ID"] === rowKey); const targetIndex = dataSource.value.findIndex( (item) => JSON.stringify(item.key) == JSON.stringify(row.key) ); if (targetIndex !== -1) { const currentPageSize = paginationConfig.value.defaultPageSize; const targetPage = Math.floor(targetIndex / currentPageSize) + 1; paginationConfig.value.current = targetPage; } if (row) { setTimeout(() => { const tableBody = tableRef.value?.$el.querySelector(".ant-table-body"); if (tableBody) { const rowElement = tableBody.querySelector( `table .ant-table-tbody tr[data-row-key="${row.key}"]` ); // 移除所有已高亮的行 const allHighlightedRows = tableBody.querySelectorAll(".highlighted-row"); allHighlightedRows.forEach(el => { el.classList.remove("highlighted-row"); }); if (rowElement) { // 使用 requestAnimationFrame 确保样式应用在下一帧 requestAnimationFrame(() => { rowElement.classList.add("highlighted-row"); // 计算并设置滚动位置 const tableBodyScrollTop = rowElement.offsetTop - tableBody.offsetTop; tableBody.scrollTop = tableBodyScrollTop; }); } }}, 100); // 增加延迟时间
} else {console.warn("未找到指定 rowKey 的行");}};
在调整后的scrollToRow方法中，我们采取了以下措施：
移除所有已高亮的行：通过查询所有带有highlighted-row类的元素，并移除其类名，确保在添加新高亮时不会有冲突。使用setTimeout和requestAnimationFrame：增加了一个短暂的延迟时间（100毫秒），确保DOM更新后再进行高亮操作。同时，使用requestAnimationFrame来确保高亮样式的应用发生在下一帧，确保浏览器有时间更新样式。
通过以上调整，我们期望在每次复制数据后，高亮效果都能稳定地显示在对应行上，而不出现交替的情况。这不仅提高了用户体验，也确保了操作反馈的即时性和准确性。
大师兄智慧家政
58到家打造的AI智能营销工具
99 查看详情
以上就是如何解决表数据复制后高亮效果交替出现的问题？的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1110293.html
微信扫一扫 
支付宝扫一扫 
