vxe table虚拟滚动

news/2024/12/2 11:34:34/

需求背景:

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

产品框架：

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)