今天遇到个需求需要在table表格中修改数据，看了网上得demo。选择使用element-table组件，在<el-table-column>中放置<template scope=scope> 拿到每组数据，有个按钮操作数据展示或编辑。 把遇到得问题和大家分享一下。

• 效果 点击修改使input输入框进入编辑状态
• image.png
  
  
  image.png
• 这里设置了两组数据 一个编辑前<span>，和编辑<input>
• 拿到数据进行遍历在每组数据中增加显示隐藏字段
• 遇到得问题：
  • 最初使用在<el-table-column>中放置<template scope=scope> 拿数据得形式。存在一个问题，当点击修改按钮得时候我不论修改data数据.isSet还是当前row.isSet 配合强制刷新this.$forceUpdate 或this.$set 或this.nextTick()最终得数据都不会刷新。
    打印log数据已经改变。
    解决：

•       <el-col v-if="item.isSet" :span="18" class="titleCol">
           <input type="text" v-model="item.itemLength" />
           <input type="text" v-model="item.itemQuantity" />
           <input type="text" v-model="item.itemWidth" />
         </el-col>
         <el-col v-else :span="18" class="titleCol">
           <el-col :span="8">
             <span>{{item.itemLength}}</span>
           </el-col>
           <el-col :span="8">
             <span>{{item.itemQuantity}}</span>
           </el-col>
           <el-col :span="8">
             <span>{{item.itemWidth}}</span>
           </el-col>
         </el-col>
  

• 最后自己写了一个，通过this.$forceUpdate 就可以完成数据得刷新
• 一个小坑，在我们请求下来数据得时候。我们会遍历数据同时为每一组数组增加isSet属性控制显示和隐藏。
• 我们会保存一个选择数组和一个原始数组来控制取消修改得这个过程。Object得引用是相同得，所以需要处理Object得引用，网上有很多方法，这里使用得是 JSON.parse(JSON.stringify(this.specListObj.specList));因为默认结构是数组中嵌套对象得形式。所以选择这种方式。
• 最后在取消得时候我们会把原始数组赋值给当前操作得数组，这里如果我们一次引用赋值也会导致引用相同。所以在赋值得时候我们也需要使用JSON.parse(JSON.stringify(this.specListObj.specList)); 这种形式将对象得引用解除。

• 最后留下一个问题，待解决 template中得 scope.row这个数据需要怎么才能刷新~ 还请高手不吝赐教~