vue一次性渲染大量表格數(shù)據(jù)的解決方案(vxe-table)

業(yè)務場景

目前項目有個粘貼名單的需求，就是粘貼大量人員名單解析后一次性渲染到表格里，不經(jīng)過處理目前超過40條表格數(shù)據(jù)頁面會變得卡頓，不流暢，達到60條數(shù)據(jù)輸入框輸入異常卡頓，很沒有體驗，連開發(fā)都覺得沒體驗，更別提用戶了

原因和解決方案

原因其實很簡單，就是一次性渲染數(shù)據(jù)太多，占用了太高的瀏覽器性能資源，導致。

故有虛擬滾動的方案，類似于長列表的懶加載（分片加載），即先渲染一部分數(shù)據(jù)，例如10條再讓用戶滾動一定位置來渲染與滾動長度相匹配的數(shù)據(jù)

成熟的解決方案

成熟的解決方案即比較成熟的庫，當然實現(xiàn)方案也不難，后面會介紹實現(xiàn)邏輯

vxe-table

vxe-table

文檔：https://xuliangzhan_admin.gitee.io/vxe-table/#/table/api

演示：https://xuliangzhan_admin.gitee.io/vxe-table/#/table/scroll/scroll

詳細使用方法：

Vue 渲染

版權(quán)聲明：本文內(nèi)容由網(wǎng)絡(luò)用戶投稿，版權(quán)歸原作者所有，本站不擁有其著作權(quán)，亦不承擔相應法律責任。如果您發(fā)現(xiàn)本站中有涉嫌抄襲或描述失實的內(nèi)容，請聯(lián)系我們jiasou666@gmail.com 處理，核實后本網(wǎng)站將在24小時內(nèi)刪除侵權(quán)內(nèi)容。