vue 中使用 vxe-table 制作可编辑表格

项目上有一个表格需要实现在线编辑，开始用了 element 的el-table 实现，单元格内基础情况就是监听了单击单元格切换一个span标签与input标签，复杂点的单元格使用了大量的条件判断来实现对应的编辑操作，比如下拉选，popover弹框编辑。整个表格几十列，十几条数据就已经出现了明显的卡顿，在做了诸多操作（比如el-input使用原生input替换、减少判断、减少频繁的数据切换等）之后，速度虽然有所提升，但是还是肉眼可见的卡顿，基本不可用。然后便转战vxe-table，重写了一遍这个表格。  当前使用的是vue2.6

下面我们使用vxe-table.

npm install xe-utils vxe-table@legacy

mport VXETable from 'vxe-table'

import 'vxe-table/lib/style.css' Vue.use(VXETable)

下面我们使用一个可编辑的table，先看效果：

 

 双击table行可编辑。下面我们使用代码来实现：

表格添加edit-config配置 ：
mode 设置cell就是单元格可编辑，设置成row就是行编辑
 :edit-config="{trigger: 'click', mode: 'cell'}

以上参照官方文档：

vxe-table v3