如何解決表數據復制后高亮效果交替出現的問題？
在數據操作過程中，確保用戶能夠清晰地看到操作結果至關重要。目前的系統中，用戶在點擊菜單切換表數據并復制數據后，通過執行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}"]` ); <pre class="brush:php;toolbar:false"> // 移除所有已高亮的行 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來確保高亮樣式的應用發生在下一幀，確保瀏覽器有時間更新樣式。
通過以上調整，我們期望在每次復制數據后，高亮效果都能穩定地顯示在對應行上，而不出現交替的情況。這不僅提高了用戶體驗，也確保了操作反饋的即時性和準確性。
? 版權聲明
文章版權歸作者所有，未經允許請勿轉載。
THE END
