這里我要感謝 pl-table的作者，引導(dǎo)我在NUXT下安裝成功。（pl-table版本：2.5.8）

2.4.6及以上版本api?https://github.com/livelyPeng/pl-table/wiki/Component-API-2.4.6及以上版本

2.3.6及以下版本api?https://github.com/livelyPeng/pl-table/wiki/component-api-2.3.6及以下版本

1.首先安裝 pl-table：cnpm install pl-table --save

2.在plugins文件下新建 plTable.js文件 (文件名隨意取)

3.在plTable.js下寫如下代碼：

import?Vue?from?'vue'

import?plTable?from?'pl-table'

import?'pl-table/themes/index.css'?//?引入樣式（必須引入)，請查看webpack是否配置了url-loader對woff，ttf文件的引用,不配置會報錯哦

//?import?'pl-table/themes/plTableStyle.css'?//?默認(rèn)表格樣式很丑?引入這個樣式就可以好看啦（如果你不喜歡這個樣式，就不要引入，不引入就跟ele表格樣式一樣，這個樣式個人介意不要引入，因為會導(dǎo)致其他table和ele的樣式問題）

export?default(()=>{

????Vue.use(plTable);

})

你會發(fā)現(xiàn)pl-table 導(dǎo)入進(jìn)來會有個提示，本以為是沒有導(dǎo)入成功，說是ts問題，這邊直接忽略就行了。（如下圖）

4.在nuxt.config.js下引入 plTable ,這里主要注意的是 ssr設(shè)置成false。這樣我們的pl-table就配置成功啦。

5.千萬條數(shù)據(jù)完美呈現(xiàn)出來了，見下圖效果

這里將近拿到2000多條數(shù)據(jù)，滾動效果很流暢，切換el-tabs也不會卡頓了。

需要注意的事項：pl-table主要是通過高度渲染表格頁面：

所以你只要在 pl-table標(biāo)簽里 引入 :auto-resize='true'? 這句話是關(guān)鍵

use-virtual是否開啟虛擬滾動 (解決大數(shù)據(jù)渲染卡頓問題)

row-height是設(shè)置表格高度的 默認(rèn)高度是60

datas是導(dǎo)入接口數(shù)據(jù) 必須是數(shù)組格式

這幾個屬性是 pl-table渲染表格的關(guān)鍵所在。

作者還在這里踩了二個大坑，當(dāng)刷新路由頁面時 報如下圖錯誤：

問題1:? 因為 頁面沒有渲染導(dǎo)致的，因為pl-table 的 ssr設(shè)置的是false 所以 組件沒辦法在服務(wù)器端渲染成功，所以我們只要在pl-table標(biāo)簽外添加 v-if 判斷一下數(shù)據(jù) 是否拿到，拿到后在渲染pl-table

問題2:我真的操碎了???提示說 在 setHeight里沒有找到?el-table__body的clientHeight的這個高度，所以導(dǎo)致pl-table不能渲染成功。

最后作者只能在自己頁面的父標(biāo)簽里 寫上 class = ‘el-table__body’ 關(guān)鍵標(biāo)簽必須有高度 這樣才解決了這個問題

希望看到的大神 有什么更好的辦法幫忙解決一下。

在此感謝pl-table的作者！ 喜歡的小伙伴給個贊吧??