element表格卡顿性能问题

之前在用vue和element搭建的项目里一直出现表格卡顿问题,开始以为是表格基数大导致的问题,后来在官网写了个demo发现并没有这方面的问题。

由于该系统后端发过来的数据大多都是id或value值,需要前端自己遍历数据,因此我写了多个过滤器来实现。

在之后的排查中发现卡顿问题是由于这些过滤器导致的,可是如果表格数据没有发生变化怎么会多次渲染,执行过滤器里的代码呢?

又在element官网中写了个demo,发现并没有多次渲染的问题出现,过滤器只在初始打开页面时执行。

很迷,排查了多个方面的问题后,发现了主要是以下两方面造成的

1.之前引用的element版本是2.7.2,每次鼠标发生移动都重新渲染表格,在这点上element2.8.2版本进行了优化,表格不再多次渲染。

2.show-overflow-tooltip导致的

解决方法:

1.引用了2.8.2版本(2.9.1版本的有些样式和功能上相对2.7.2变化比较大,对于系统来说需要改造的地方多)的element,由于我们公司的系统是引入的,所以要引入的文件unpkg.com/[email protected]/lib/index.js和//unpkg.com/[email protected]/lib/theme-chalk/index.css,下载到本地的不要忘记同时下载fonts文件夹里面的

element-icons.ttf(//unpkg.com/[email protected]/lib/theme-chalk/fonts/element-icons.ttf)

element-icons.woff(//unpkg.com/[email protected]/lib/theme-chalk/fonts/element-icons.woff)

2.删掉了所有的show-overflow-tooltip

需要用到的可以选择自己每一列把tooltip加到template中。

或者绑定.cell,显示title

猜你喜欢

转载自blog.csdn.net/weixin_39308542/article/details/93048434