当前位置: 首页>移动开发>正文

iview的表格多选在分页之后获得相应的最终结果

场景描述:比方说表格第一页选中了两条数据,跳转到第二页,然后返回到第一页,第一页的选中效果要仍然有,在回到第二页选中三条数据,那么总共选中了的五条数据,再取消选中一条,现在总共选择了四条数据。

首先,你要知道如何让表格默认选中,我们使用了两个data,一个是当前页选中的值为chooseList,还有一个是所有页面选中的值totalChooseList,在初始化进来拉取接口数据的时候,用一个双层循环将默认值赋予,不用延时的话可能会出错,因为,表格还没有完全渲染好,所以需要一个setTimeout的延时

//表格的初始化,将表格的绑定数据进行渲染,然后,将最终值进行判定,选择哪些数据是需要默认选中的
for(let i in this.resDataList){    
  let flag=false;
  for(let j in this.totalChooseList){
    if(this.resDataList[i].id===this.resDataList[j].id){
      flag=true;
      break;
    }
  }
  if(flag){
    setTimeout(()=>{
      this.$refs.selection.toggleSelect(i);
    },1)
  }
}

再写一个方法是选择性的将chooseList中的数据塞进totalChooseList,如果有了,那就不塞进去了,没有,就将这个值塞进去存储起来

      //选择性放入最终值
      addTotalChooseList(){
        for(let i in this.chooseList){
          let flag=false;
          for(let j in this.totalChooseList){
            if(this.chooseList[i].supplier_no===this.totalChooseList[j].supplier_no){
              flag=true;
              break;
            }
          }
          if(!flag){
            this.totalChooseList.push(this.chooseList[i]);
          }
        }
      },

在分页切换的时候,就要执行选择性放入最终值了,别忘了进行清空chooseList中的值

      //分页页数改变
      changePage(current){
        this.queryList.pageNum=current;
        this.addTotalChooseList();
        this.chooseList=[];
        this.getDataList();
      },

给表格添加选中值发生变化的事件以及删除的事件

<Table @on-select-cancel="deleteChoose" @on-selection-change="selectChoose"  :columns="columns1" ref="selection" :data="resDataList" size="large"></Table>
      //选中值发生变化的事件
      selectChoose(selection){
        this.chooseList=selection;
        this.addTotalChooseList();
      },
    //删除的事件
      deleteChoose(selection,row){
        for(let i in this.totalChooseList){
          if(this.totalChooseList[i].supplier_no===row.supplier_no){
            arrayDelete(this.totalChooseList,i);
            break;
          }
        }
      },

arrayDelete为引入的公用方法

//数组删除一个元素
export function arrayDelete(array,index) {
  array.splice(index,1);
}

最终的结果就是this.totalChooseList,主要就是两个难点,一个表格的默认值渲染,你可以将渲染放在表格的初始化渲染事件中,能节约很多的事情,其次就是对于选中值的操作,选中值和最终值进行对比,有就不做添加,没有即添加,然后还要给表格绑定删除的事件,将要删除的值从最终值中删去,就完成啦!


https://www.xamrdz.com/mobile/45h1995679.html

相关文章: