这里我要感谢 pl-table的作者,引导我在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' // 默认表格样式很丑 引入这个样式就可以好看啦(如果你不喜欢这个样式,就不要引入,不引入就跟ele表格样式一样,这个样式个人介意不要引入,因为会导致其他table和ele的样式问题)
export default(()=>{
Vue.use(plTable);
})
你会发现pl-table 导入进来会有个提示,本以为是没有导入成功,说是ts问题,这边直接忽略就行了。(如下图)
4.在nuxt.config.js下引入 plTable ,这里主要注意的是 ssr设置成false。这样我们的pl-table就配置成功啦。
5.千万条数据完美呈现出来了,见下图效果
这里将近拿到2000多条数据,滚动效果很流畅,切换el-tabs也不会卡顿了。
需要注意的事项:pl-table主要是通过高度渲染表格页面:
所以你只要在 pl-table标签里 引入 :auto-resize='true' 这句话是关键
use-virtual是否开启虚拟滚动 (解决大数据渲染卡顿问题)
row-height是设置表格高度的 默认高度是60
datas是导入接口数据 必须是数组格式
这几个属性是 pl-table渲染表格的关键所在。
作者还在这里踩了二个大坑,当刷新路由页面时 报如下图错误:
问题1: 因为 页面没有渲染导致的,因为pl-table 的 ssr设置的是false 所以 组件没办法在服务器端渲染成功,所以我们只要在pl-table标签外添加 v-if 判断一下数据 是否拿到,拿到后在渲染pl-table
问题2:我真的操碎了❤️ 提示说 在 setHeight里没有找到 el-table__body的clientHeight的这个高度,所以导致pl-table不能渲染成功。
最后作者只能在自己页面的父标签里 写上 class = ‘el-table__body’ 关键标签必须有高度 这样才解决了这个问题
希望看到的大神 有什么更好的办法帮忙解决一下。
在此感谢pl-table的作者! 喜欢的小伙伴给个赞吧❤️