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/element-ui@2.8.2/lib/index.js和//unpkg.com/element-ui@2.9.1/lib/theme-chalk/index.css，下载到本地的不要忘记同时下载fonts文件夹里面的

element-icons.ttf（//unpkg.com/element-ui@2.8.2/lib/theme-chalk/fonts/element-icons.ttf）

element-icons.woff(//unpkg.com/element-ui@2.8.2/lib/theme-chalk/fonts/element-icons.woff)

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

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

或者绑定.cell,显示title