element UI+vue table 分页记忆

html代码
data中需要声明的变量
下边就是最关键的方法部分了 两天才出来的效果,网上的很多分用在我们的项目中一直不能实现,可能是由于数据请求的关系
toggleSelection(rows) {
if (rows) {
rows.forEach(row => {
console.log(row);
this.KaTeX parse error: Expected 'EOF', got '}' at position 45: …(row); }̲); } else…refs.table.clearSelection();
}
},

// 设置选中的方法
setSelectRow(data) {
  console.log(data);
  if(data&&data.length>0){
    var d = this.tableData;
    for(var i=0;i<data.length;i++){
     var index = data[i].personId;
     this.$refs.table.toggleRowSelection(this.tableData[index], true);
    }
  }
 
},
// 记忆选择核心方法
changePageCoreRecordData() {
  // 标识当前行的唯一键的名称
  let idKey = this.idKey;
  let that = this;
  // 如果总记忆中还没有选择的数据,那么就直接取当前页选中的数据,不需要后面一系列计算
  if (this.multipleSelectionAll.length <= 0) {
    this.multipleSelectionAll = this.multipleSelection;
    return;
  }
  // 总选择里面的key集合
  let selectAllIds = [];
  this.multipleSelectionAll.forEach(row => {
    selectAllIds.push(row[idKey]);
  });
  let selectIds = [];
  // 获取当前页选中的id
  this.multipleSelection.forEach(row => {
    selectIds.push(row[idKey]);
    // 如果总选择里面不包含当前页选中的数据,那么就加入到总选择集合里
    if (selectAllIds.indexOf(row[idKey]) < 0) {
      that.multipleSelectionAll.push(row);
    }
  });
  let noSelectIds = [];
  // 得到当前页没有选中的id
  this.tableData.forEach(row => {
    if (selectIds.indexOf(row[idKey]) < 0) {
      noSelectIds.push(row[idKey]);
    }
  });
  noSelectIds.forEach(id => {
    if (selectAllIds.indexOf(id) >= 0) {
      for (let i = 0; i < that.multipleSelectionAll.length; i++) {
        if (that.multipleSelectionAll[i][idKey] == id) {
          // 如果总选择中有未被选中的,那么就删除这条
          that.multipleSelectionAll.splice(i, 1);
          break;
        }
      }
    }
  });
},
currentChange(val) {
  this.nextPageFlag = true;
  // 改变页的时候调用一次
  this.changePageCoreRecordData();
  this.pagination.pageNumber = val;
  this.queryData();

},
sizeChange(val) {
  // 改变每页显示条数的时候调用一次
  this.changePageCoreRecordData();
  this.pagination.pageSize = val;
  this.queryData();
}, 
handleSelectionChange(val) {
  var key = this.pagination.pageNumber;
  if(val.length>0){
    this.checkedObj[key]= val;
  }
  if(val.length==0&&!this.nextPageFlag){
    this.checkedObj[key]= val;
  }
  this.nextPageFlag = false;
},
queryData() {
  var that = this;
  that.tableData = [];
  var state = that.$route.query;
  var rotate = that.$route.query;
  var data = {
    startTime: that.$store.state.time.startTime * 1000,
    stopTime: that.$store.state.time.stopTime * 1000,
    linkCard:parseInt(rotate.linkCard) || parseInt(that.$store.state.linkCard),
    currentPage: that.pagination.pageNumber,
    pageSize: that.pagination.pageSize
  };
  filesService.getFiles(data).then(function(res) {
    if (res.status == 200) {
        var arr = res.data.dataInfo;
        that.pagination.totalRows = res.data.total;
        var fileDataArr = [];
        for (var i = 0; i < arr.length; i++) {
          var fileData = {};
          fileData.fileName = arr[i]._source.fileName;
          fileData.cardId = arr[i]._source.cardId;
          fileData.startTime = arr[i]._source.startTime;
          fileData.endTime = arr[i]._source.endTime;
          fileData.personId = i;
          fileDataArr.push(fileData);
        }
        that.tableData = fileDataArr;
        setTimeout(() => {
          that.setSelectRow(that.checkedObj[that.pagination.pageNumber]);
        }, 100);
         console.log(that.checkedObj);
    }
  });
}, 
  • 2
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值