在开发过程中,遇到一种情况。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作用  强制更新(视图重新渲染)

Logo

前往低代码交流专区

更多推荐