VUE+ElementUI: 表格数据处理后再渲染 遇到的问题
在开发过程中,遇到一种情况。table表格获取绑定数据后,需要对数据进行一些处理,比如设置一些属性,行中展示的是一个checkBox,需要将对应值解析为true false这种。一开始的处理很直白,将设原本绑定的数据为originTableListitem对象为item:{id:1,name:item1,isImportant:1}经过预处理之后 为 tmpTableList...
在开发过程中,遇到一种情况。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作用 强制更新(视图重新渲染)
更多推荐
所有评论(0)