获取数据失败请稍后再试（解决获取数据后this.$refs.xxx.toggleRowSelection无效的问题）

获取数据后this.$refs.xxx.toggleRowSelection无效

获取数据后在外部加上一个$nextTick即可

原因大概如下：

$nextTick 是在下次 DOM 更新循环结束之后执行延迟回调   
    
    
    
，在修改数据之后使用 $nextTick


     


     


     


  ，则可以在回调中获取更新后的 DOM

toggleRowSelection失效的2个原因

背景

当在含分页的table中 




 




 




 
，需分页切换后对列表项的勾选状态做回显操作    
    
    
  。根据element文档使用 this.$refs.mytable.toggleRowSelection（row, selected）方法回显   

   

   

   

，实际应用时会出现回显失效的情况    


     


     


     
。

失效原因

1   
    
    
    
、 ref 文档本身是作为渲染结果被创建的

     

     

     

 ，在初始渲染的时候你不能访问它们 - 它们还不存在！ $refs 也不是响应式的
  




  




  




  ，因此你不应该试图用它在模板中做数据绑定




 




 




 




。

数据更新后Dom会注销新建  


  


  


  


，导致我们勾选操作失效

2


     


     


     


  、我们操作的勾选数据必须是表单数据 
     
     
     
，即便数据一模一样

   




   




   




   ，数据存储地址的指针不同也会导致失效

解决办法

1 




 




 




 
、使用$nextTick,在dom 更新完成后的回调中来处理渲染选中

2   

   

   

   

、通过已选数据对比筛选表单数据来操作同一数据

以上为个人经验 



 



 



 


，希望能给大家一个参考                 ，也希望大家多多支持本站   

   

   

 。