一、问题
迄今为止，参与vue开发的是使用element-ui或iview。 在我们的开发中，table组件起着重要的作用，并且非常频繁地使用。 但是，如果数据量很大，这个组件的性能非常令人担忧。
看看上面的情况吧。 只需6个字段，就可以看到非常简单的逻辑和数据。
(1) 100个数据
)2) 1000份数据
(3) 10000个数据
直接上钩，半天也渲染不了
由此可见，该table组件仅适用于渲染较小的数据量或进行合理的分页。
二、优化思路
)表中的数据在object.freeze(data )中处理。 因为一般来说表中的数据不会更改。 通常，在进行更改后，调用接口重新打印数据。 这样，vue就不会进行getter和setter的转换。 这意味着此数据可以提高表渲染的性能，而不是响应表达式。
)2)减少使用计算属性和dom的判定渲染。 后端可能只传递状态代码。 使用不同的状态代码渲染不同的内容，如{status: 0}。 此时，呈现会员这个中文。 此时，可以通过js转换数据，然后成为{status: '会员' }，直接进行渲染。
)3)升级了低版本的元件- ui，在元件- ui2.8. 0版中提高了表的性能。
三.终极版本
以上方法只能解决部分问题，最后引入vex-table组件进行了根本优化。
(1)依赖安装
npm install xe-utils vxe-table
)2)进行全球注入
import Vue from 'vue '
导入vxetable from ' vxe-table '
import 'vxe-table/lib/index.css '
VUE.use(vxetable，{
size: 'small '，
工具配置： {
zIndex: 3000
}
() )
复制代码
)3)进行按需导入，去除多余部分
如果没有安装依存关系，请先安装
npminstallbabel-plugin-import-d
然后用. babelrc文件进行配置
{
' plugins': [
[
“导入”、
{
'库名称' : ' vxe-table '，
' style': true
}
]
]
}
代码导入{
VXETable，
表
Column，
Cell，
头，
布洛迪，
国际货币基金组织
} from 'vxe-table '
VUE.use(table ) )
vue.use (列) )。
vue.use (小区) )。
VUE.USE(header ) )。
vue.use(body ) )。
vue.use(icon ) ) ) )。
复制代码
四.进行下对比
1000份数据
使用vxe表
使用元素- ui表
比较起来，渲染时间快了一半以上。
另外，vxe-table组件还包括虚拟滚动的东东。 原理是只渲染你看到的部分，其他部分不渲染。 大大提高了表对大量数据的性能。
粘贴vxe-table的api文档。