VUE+ElementUI: 表格数据处理后再渲染 遇到的问题

  在开发过程中，遇到一种情况。table表格获取绑定数据后，需要对数据进行一些处理，比如设置一些属性，行中展示的是一个checkBox，需要将对应值解析为true false这种。

 一开始的处理很直白，将设原本绑定的数据为originTableList

item对象为 item:{id:1,name:item1,isImportant:1}

经过预处理之后 为 tmpTableList

item对象为 item:{id:1,name:item1,isImportant:true}

然后将tmpTableList 绑定到 element的 table

这时候会出现 点击table行中的 checkBox时候，有时候会无反应（这个时候绑定item的isImportant值和页面渲染的展现已经不一致了），在下一次或几次点击，会正确显示绑定值和ElementTable的关系。

 

其实在一些form表单会显也会遇到这样的问题！

 

解决: 在处理之后，使用nextTick 包裹

//数据解析处理

this.$nextTick(function(){

   //数据绑定操作

})

在点击checkBox的响应时间添加 this.$forceUpdate()

 

拓展:

this.$nextTick的作用   https://www.jianshu.com/p/a7550c0e164f

 

this.$forceUpdate作用  强制更新(视图重新渲染)