这是我参与8月更文挑战的第29天，活动详情查看：8月更文挑战
公司项目刚好要用到一个可编辑的table，今天又在思考写什么文章好，那就写一篇table的文章吧，顺便记录一下。
由于这个项目里的table功能不够强大，所以决定还是使用之前我推荐过的vxe-table来写，回家刚好把demo写一下，明天到公司移植一下就行了。
首先yarn安装一下
yarn add xe-utils
yarn add vxe-table
然后use一下
import Vue from 'vue'
import VXETable from 'vxe-table'
import 'vxe-table/lib/index.css'
Vue.use(VXETable)
说真的，原本项目好好的，突然爆炸了，找了半天原因未遂，一怒之下怒删项目，换成了vue-admin-template这个基础的模板。
由于没有花里胡哨的组件，yarn的时候也很顺利，瞬间就成功了，但是看起来就很简陋
先写表格吧,首先是这种手动触发编辑的表格，点击编辑后，该行就变成了可编辑的状态
对数据进行修改后，可以保存或者取消
看一下使用的方法，给vxe-table设置 edit-config={trigger: 'manual', mode: 'row'} 就会启用当前的，行编辑的功能，还可以配合 revertData 函数实现取消就还原数据
操作列有调用3个不同的方法，实现编辑，保存，取消。
editRowEvent接收一个row参数，可以把该row设置为可编辑状态，cancelRowEvent调用了revertData，还原为了原本的数据，saveRowEvent保存数据，就需要和后端进行交互，进行数据的存储了。
平时如果数据库中数据是按行存储的，可以获取到row数据，修改当前条数据就行了，但是由于本次项目的存储方式是把所有数据序列化后存储的，于是就需要修改整体的数据了。可以获取到this.tableData，发送给后端接口，就能实现编辑功能了
