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版本中， 对表格的性能进行了提升。

三、终极版本

以上的方法只能解决部分问题，最后还引入vex-table组件进行根本优化。

(1)安装依赖

npm install xe-utils vxe-table

(2)进行全局注入

import Vue from 'vue'

import VXETable from 'vxe-table'

import 'vxe-table/lib/index.css'

Vue.use(VXETable, {

size: 'small',

tooltipConfig: {

zIndex: 3000

}

})

复制代码

(3)进行按需引入，去除多余的部分

如果没安装依赖，先安装

npm install babel-plugin-import -D

然后在文件 .babelrc 中配置

{

"plugins": [

[

"import",

{

"libraryName": "vxe-table",

"style": true

}

]

]

}

复制代码import {

VXETable,

Table,

Column,

Cell,

Header,

Body,

Icon

} from 'vxe-table'

Vue.use(Table)

Vue.use(Column)

Vue.use(Cell)

Vue.use(Header)

Vue.use(Body)

Vue.use(Icon)

复制代码

四、进行下对比

1000条数据

使用vxe-table

使用element-ui table

对比发现， 渲染时间快了一半还要多。

而且在vxe-table组件中，还有个虚拟滚动的东东。原理是 只渲染你看的这部分， 其他部分不进行渲染。对大量数据的表格的性能提升有非常大的提升。

一下贴上vxe-table的api 文档。