element-ui 表格 修改后, 表格里面的数据 页面不实时更新问题 完美解(1)

循环的时候show给了表格所有的行，所以点击一个"更多"导致所有的"更多"都隐藏了；

做法2：

给"更多"绑定一个v-show='(scope.$index+1)' ，理想状态是：索引最低是0，+1后，至少也为1,所以显示，给删除和补仓设置为 v-show='!(scope.$index+1)' 取反就是隐藏了；

结果2：

未成功，报错

做法3：

当取到表格的data数据后，循环给数据一个flag =true ，在赋值给表格，点击"更多"后把当前的行索引拿到 ，把当前行的 this.tables[index].flag = false设置为false；

结果3

未成功，点击第一个 “更多"可以 隐藏"更多”，显示 删除、补仓， 出现问题：在点击其他行的"更多"就不能正常显示和隐藏，还是有问题

做法4：

百度到的结果：用set方法，当取到表格的data数据后，循环给数据一个flag =true ，在赋值给表格，点击"更多"后把当前的行索引拿到 ，把当前行的 this.tables[index].flag = false设置为false； 并 设置：this.$set(this.tables);

结果4

未成功，结果是点击第一个"更多"可以改变，点击其他的"更多"还是改变不了；

做法5：

把当前行的 this.tables[index].flag = false设置为false；然后在把 表格的数据 用 JSON this.tables = JSON.parse(JSON.stringify(this.tables)); 值重新克隆一遍 再赋值给表格就OK了

结果5：

成功(有缺陷)， 如果只有 new Date的话 转化就会有问题

做法5的缺陷：

如果有 new Date的话，转化就会有问题 (会把new Date转化成 字符串)

做法6：

使用 JSON.parse(JSON.stringify(this.tables)) 也可行，但是怎么能止步于此呢，赋值给tables表格，那么我还能这样 this.tables = this.tables.filter(item => item); ，把每一项重新 复赋值给 this.tales ；

结果

成功， 所有的表格项可以正常隐藏 和显示

做法6 完美解决了缺陷

做法7： Object.assign

直接使用es6的 Object.assign复制一个新的对象 this.tables = Object.assign([],this.tables) 少去了过滤循环的麻烦 简单明了

结果

成功， 所有的表格项可以正常隐藏 和显示

做法8：未测试

使用 this.$forceUpdate()

vue强制更新$forceUpdate()

添加this.$forceUpdate();进行强制渲染，效果实现。搜索资料得出结果：因为数据层次太多，render函数没有自动更新，需手动强制刷新。

调用强制更新方法this.$forceUpdate()会更新视图和数据，触发updated生命周期。

我是在使用多层for循环嵌套时出现的页面没有及时刷新改变后的值的问题( 使用 this.$forceUpdate() )

作者：小凖

链接：https://www.jianshu.com/p/19a192b18672

来源：简书

著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

以下demo代码可复制到新的vue文件里面直接查看，点击查看效果

---

<el-button @click=“showTable”>显示表格

编辑

<el-button

type=“primary”

size=“small”

v-show=“scope.row.flag”

@click=“more(scope.$index,scope.row)”

更多

删除

补仓