toggleRowSelection()失效的2个重要影响因素

背景

需求：当我们在含分页器的table做了多选勾选框操作时，分页切换时要保证回显已选中项。

方法

根据文档使用tabled的Method：toggleRowSelection（row, selected）

实际应用

数据请求完直接遍历每个item this.$refs.multipleTable.toggleRowSelection(row,true),这样操作下此函数就会失效。

因素1: ref 文档描述可知

ref 本身是作为渲染结果被创建的，在初始渲染的时候你不能访问它们 - 它们还不存在！ $refs 也不是响应式的，因此你不应该试图用它在模板中做数据绑定。
数据更新后Dom会注销新建，导致我们勾选操作失效

因素2: 勾选操作数据必须为所操作的表单数据

我们操作的勾选数据必须是表单数据，即便数据一模一样，数据存储地址的指针不同也会导致失效

解决办法

结合上面所提2条因素
1、使用$nextTick,在dom 更新完成后的回调中来处理渲染选中
2、通过已选数据对比筛选表单数据来操作同一数据

 this.checkedData.forEach(item => {
     // checkedData为已选数据
          this.$nextTick( ()=>{
    
            this.userData.find(obj => {
     // userData 表单数据
              if(item.id === obj.id) {
    
                this.$refs.multipleTable.toggleRowSelection(obj,true)
             }
         })
     })
 })