web 前端

element ui ----table表格(带多选框)+分页实

2020-07-23  本文已影响0人  萬wan事顺意

大概的需求是,把A表格里面选中的数据,赋值到B表格中,当B表格移除某条数据时,A表格中对应的那条数据也应该取消选中。


image.png
image.png

首先遇到的问题是,切换到第二页以后导致第一页选中的数据取消了,解决方法,官方文档有提到,上代码


image.png
image.png

row.supplierguid 是唯一标识,什么id,key等。
再然后遇到的问题就是A表格移除某一项数据以后,B还是选中状态,解决方法如下
官网的最基础是这样


image.png

但是因为我不在同一个表格里,所以我得去找对应的index

delSupplier(index,supplierguid,suppliername) {
            this.InvitationData.splice(index, 1);  //移除A表格里的某条数据
            var sId=this.firstIndex(this.sipplierData,supplierguid)    //找A表格与B表格对应的数据
            if(sId!= -1){  //因为是分页的,所以跳转到第二页,页面第一页数据就清空了,如果第一页有选中的数据,那么就会找不到,就会报undefined错误,所以此处判断,如果有当前数据,那么进行取消选中
                this.$refs.multipleTable.toggleRowSelection(this.sipplierData[sId],false);
            }else{ //如果没有,通过查询当前数据,取index为0的就可。
                this.SupplierList.supplierName=suppliername;
                this.getSupplierList(this.SupplierList); //获取B表格的数据方法
                  setTimeout(() => {  //
                       this.$refs.multipleTable.toggleRowSelection(this.sipplierData[0],false);
                    }, 50);
            }
        }
    },

找数组里某条数据的index

firstIndex(arr, text) {
      // 若元素不存在在数组中返回-1
      let firstVal = -1;
      for (let i = 0; i < arr.length; i++) {
        // json (arr[i].id == text)
        if (arr[i].supplierguid == text) {
          firstVal = i;
          return firstVal;
          break;
        }
      }
      return firstVal;
    },
上一篇下一篇

猜你喜欢

热点阅读