vxe table虚拟滚动

需求背景:

表格涉及手工录入，当数据量超过30条时，编辑会有明显卡顿，数据量越大，卡顿时间越久。

产品框架：

vue2.5.2

view-design4.7.0

PS：前端基本没人管的老项目。。

原因: 

1、组件实例过多

2、v-model在输入框输入使频繁触发更新，频繁重绘性能开销大

为什么要使用 vxe table：

公司做的SaaS服务系统，里面状态逻辑繁多，最开始使用iview-table写的，上线后数据量大时用户手工编辑明显卡顿，需要快速解决问题。当时想的是做分页，但不符合产品设计以及代码逻辑改动较大，调研后采用长期维护的vxe-table V3版本

实现思路：

需要做到

1、兼容原本iview表单组件

2、平滑过渡，尽可能少的改动代码

3、了解vxe-table组件以及api 

下载vxe-table 以及兼容iview插件

 npm install xe-utils vxe-table@legacy vxe-table-plugin-iview

项目中全局引入或者按需引入 

  此示例为全局引入

import VXETable from 'vxe-table'
import VXETablePluginIView from 'vxe-table-plugin-iview'
import 'vxe-table-plugin-iview/dist/style.css'
import 'vxe-table/lib/style.css'
Vue.use(VXETable)
VXETable.use(VXETablePluginIView)

 iview-table修改为vxe-grid

 这里采用vxe-grid高级表格，因为它的插槽功能更加强大，能兼容iview组件

<Table><\Table>
替换为
<vxe-grid><\vxe-grid>
去掉原有表格所有attrs和listeners

配置vxe-grid中的 attrs 和 listeners 

<vxe-grid ref='xGrid' v-bind="gridOptions"> </vxe-grid>
gridOptions: {
        border: true,  //显示边框
        resizable: true, //列是否允许拖动列宽调整大小
        showOverflow: true, //当内容过长时显示为省略号
        footerMethod: this.footerMethod, //表尾的数据获取方法，返回一个二维数组,做的金额合计项
        scrollY: { 
          enabled: true,  //开启虚拟滚动
          gt: 15,   //指定大于指定行时自动启动纵向虚拟滚动
          mode: 'wheel'  //高级滚动模式
        },
        maxHeight: 416,
        align: 'left',
        columns: [], //列配置
        data: []  //数据源
},

代码调整的注意点 

1、表格columns配置列改动----iview原有key 改为 field，slot改为slots

2、插槽解构值改动----iview原有slot-scope="{ row, index }" slot="fileName" 改为  #[slotsName]="{ row, rowIndex}"

3、表格复选框以及全选功能需要按实际需求调整

4、底部显示合计项要在实例上配置show-footer属性

5、功能操作之后刷新表格

this.gridOptions.data = tableData

this.$refs.xGrid.reloadData(this.gridOptions.data)

更多的细节请自行看文档 

 vxe-table v3 (vxetable.cn)

总结 

最开始按照文档的按理写法根本适配不了原有项目中的组件，摸索了一天文档，才知道问题出在哪里。没啥多说的，多看文档！多看文档！多看文档！  =。=