vue摸板 大数据_vue 大数据table解决方案

一、 问题

一直以来从事vue开发要不就是使用element-ui ,要不然就是iview。而在我们的开发中table组件可以说是重中之重，非常频繁的使用到。但是如果碰到数据量多的时候，这个组件的性能非常堪忧。

下面我们来试试一下上面的情况， 可以看到仅仅只是6个字段， 极为简单的逻辑和数据。

(1)100条数据

(2)1000条数据

(3)10000条数据

直接卡死了，半天也渲染不出来

由此可见， 这个table组件只适合渲染小数据量的，或者要进行合理的分页。

二、优化思路

(1)表格数据使用Object.freeze(data)处理，因为一般来说表格中的数据是不会进行更改的。一般进行更改后都是重新调用接口来重刷一遍数据。这样，vue不会做getter和setter的转换，即这个数据不是响应式的了，可以提高表格渲染的性能。

(2)减少使用计算属性和dom的判断渲染。有时候后端只会传给你一个状态码， 你会通过不同的状态码来渲染不同的东西， 比如{status: 0}, 这时候你将要渲染会员这个中文。这时候 你可以在js中先将数据进行转换下，变成{status: '会员'}，直接渲染上去。

(3)对低版本的element-ui进行版本升级，在element-ui 2.8.0版本中， 对表格的性能进行了提升。

三、终极版本

以上的方法只能解决部分问题&