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>
替换为
<\vxe-grid>
去掉原有表格所有attrs和listeners 
  

配置vxe-grid中的 attrs 和 listeners 

 
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)

总结 

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

 

 

 

 

 

 

 

 

 

你可能感兴趣的:(vue.js,前端,vxe-table,表格虚拟滚动)