Element UI 动态表格动态分页 记忆选中勾选的项

    由于项目中要用到选中列表中项，来记住选中的结果实现结果如下图：

遇到难题： 

   切换分页的时，表格绑定的数组重新渲染了，导致已勾选的行状态初始化了（未勾选），表格绑定代码

<el-table ref="fittingList"  class="sys-table choose-fitting-table" :data="fittingList" border @select="handleSelectionChange">

主要实现思路如下：

1. 定义一个存放已勾选数组来存已选中的行，每次勾选某一行的时候调用element 勾选select事件，判断当前的行是否存在已勾选的数组中，有则删无则加。
   

   点击某行的勾选的事件@select

   handleSelectionChange (selection, row) { 
   //是否手动点击了勾选
    if (!this.handsSelect) {   
      let selectFittingId = this.selectFittingRow.map(v => {return v.accessories_id}) 
      // 有则删无则加   
      if (selectFittingId.includes(row.accessories_id)) {   
       let _index = selectFittingId.indexOf(row.accessories_id)    
       this.selectFittingRow.splice(_index, 1)}
      else {     
       this.selectFittingRow.push(row)    
       }  
      }  
     this.handsSelect = false
   }
   

2. 每次切换分页时（表格绑定的数组重新渲染时），遍历判断当前页里的一列数据是否有行和存放已勾选的数组的项一样，有则调用toggleRowSelection(element ui table勾选行方法)勾选次行。
   采用Vue watch监听重新渲染的表格数组

     watch: {
       fittingList (n, o) {
         this.$nextTick(_ => {
           let selectFittingIds = this.selectFittingRow.map(v => {
             return v.accessories_id
           })
           this.fittingList.forEach((row, index) => {
             if (selectFittingIds.includes(row.accessories_id)) {
               //不能手动勾选           
               this.handsSelect = true
               this.$refs.fittingList.toggleRowSelection(this.fittingList[index], true)
             }
           })
         })
       }
     },