需求：点击table表格中的“修改”之后，当前行变为可输入状态的行，点击“确定”后变为普通表格；

先贴上已经完美解决问题的代码
实现代码：

<section><div style="display: flex;justify-content: space-between;align-items: center;margin-bottom: 10px"><h4>接入点信息</h4><el-button type="primary" @click="addBtn">新 增</el-button></div><el-form ref="form1" :model="formData" label-width="0px" :inline-message="true"><el-table :data="formData.access_param" :border="true"><el-table-column label="名称" align="center" prop="name"><template slot="header"><span><span class="fred">*</span>名称</span></template><template slot-scope="scope"><el-form-item v-if="scope.row.editable" :prop="'access_param.' + scope.$index + '.name'" :rules="tableFromRules.name"><el-input v-model="scope.row.name"></el-input></el-form-item><span v-else>{{ scope.row.name }}</span></template></el-table-column><el-table-column label="拓扑角色" align="center" prop="topo_type"><template slot="header"><span><span class="fred">*</span>拓扑角色</span></template><template slot-scope="scope"><el-form-item v-if="scope.row.editable" :prop="'access_param.' + scope.$index + '.topo_type'" :rules="tableFromRules.topo_type"><el-select v-model="scope.row.topo_type" clearable><el-option :value=1 label="任意到任意"></el-option><el-option :value=2 label="中心节点"></el-option><el-option :value=3 label="边缘节点"></el-option><el-option :value=4 label="点到点"></el-option></el-select></el-form-item><span v-else>{{ scope.row.topo_type }}</span></template></el-table-column><el-table-column label="接入方式" align="center" prop="access_type"><template slot="header"><span><span class="fred">*</span>接入方式</span></template><template slot-scope="scope"><el-form-item v-if="scope.row.editable" :prop="'access_param.' + scope.$index + '.access_type'" :rules="tableFromRules.access_type"><el-select v-model="scope.row.access_type" clearable><el-option :value=1 label="单归"></el-option><el-option :value=2 label="双归主备"></el-option><el-option :value=3 label="双归负载"></el-option></el-select></el-form-item><span v-else>{{ scope.row.access_type }}</span></template></el-table-column><el-table-column label="操作" align="center" width="120"><template slot-scope="scope"><div class="fullstacktable_btn"><el-button @click="modifyBtn(scope.row,scope.$index)" type="button" v-show="title == '修改'&&!scope.row.editable">修改</el-button><el-button @click="saveBtn(scope.row,scope.$index)" type="button" v-show="title == '修改'&&scope.row.editable">确定</el-button><el-button @click="delBtn(scope.row,scope.$index)" type="button">删除</el-button></div></template></el-table-column></el-table></el-form>
</section>

data中的数据定义部分

formData: {access_param: [{ name: "", topo_type: "", access_type: "", status: true, editable: true},],
},

说明：其中，status字段为接口返回的字段，用来表示是否可以编辑或删除；true表示可以删除或修改，false表示被占用中，不可以删除或修改；editable是前端页面自己定义的字段，用来控制显示可编辑列还是普通列；
methods中的方法实现

addBtn() {let flag = false;this.formData.access_param.forEach((item, index) => {if (!item.name || !item.topo_type || !item.access_type) {flag = true;return true}})if (flag) {this.$message({message: '请先完善必填信息!',type: 'info',showClose: true});} else {this.formData.access_param.push({name: "", topo_type: "", access_type: "",editable: true,status: true})}
},
modifyBtn(row,index) {if (!row.status) { // true：可以修改；false：不可以修改；this.$message({message: '已被占用，不支持修改！',type: 'warning',showClose: true});return}this.formData.access_param[index].editable = true;this.formData = JSON.parse(JSON.stringify(this.formData));
},
saveBtn(row,index) {if (row.name == "" || row.topo_type == "" || row.access_type == "") {this.$message({message: '请先完善必填信息!',type: 'info',showClose: true});return}this.formData.access_param[index].editable = false;this.formData = JSON.parse(JSON.stringify(this.formData));
},
delBtn(row,index) {if (!row.status) { // true：可以修改；false：不可以修改；this.$message({message: '已被占用，不支持删除！',type: 'warning',showClose: true});return}if (this.formData.access_param.length === 1) {this.$message({message: '至少保留一条数据',type: 'warning',showClose: true})return}this.formData.access_param.splice(index,1)
},

遇到问题的解决步骤：

1. 在modifyBtn方法中想要通过修改当前行的editable字段来切换可编辑行和普通行 this.formData.access_param[index].editable = true;点击“修改”按钮没有效果，数据更新了视图没有更新，因为数据层次太多，render函数没有自动更新，需手动强制刷新。

2. 通过this.$forceUpdate()强制刷页面，依然无效

this.formData.access_param[index].editable = true;
this.$forceUpdate();

3. 想要使用this.$set来更新视图

this.$set(this.formData.access_param[index],'editable', true);

结果：第一次点击“修改”按钮可以将当前行变为可编辑的列，但是点击其他的“修改按钮”就没有效果了

4. 把当前行的this.formData.access_param[index].editable = true;设置为true；然后在把 表格的数据 用this.formData = JSON.parse(JSON.stringify(this.formData)); 重新克隆一遍再赋值给表格就OK了，这也是我代码中使用的方法，但是使用JSON.parse(JSON.stringify());这种方法会有缺陷：如果数据中有使用new Date会将其转换成字符串，需要把数据过滤一下；

this.formData.access_param = this.formData.access_param.filter(item => item);

5. 最完美的办法：直接使用es6的 Object.assign复制一个新的对象 this.formData = Object.assign([],this.formData) 简单明了

其他办法：
给table加key：修改绑定在 table 上面的 key 值，可以触发 table 的重新渲染，这样就可以把修改后的 data 在表格里面更新渲染。