vue + element ui列表实现翻页一直选中,动态回显

element ui + vue表格,动态选中表格里的复选框,并且翻页也一直选中,最后提交选中的表格的某列信息

在初始化页面的时候查询已经选中的列表的数据:
方法名 () {
this.KaTeX parse error: Expected '}', got 'EOF' at end of input: … url: this.http.adornUrl(‘请求后台的url’),
method: ‘get’,
async:true,
params: this.$http.adornParams({
请求参数
})
}).then(({data}) => {
if (data && data.code === 0) {
this.multipleTable = data.selectionList
//把选中的赋值给数组
this.multipleTable.forEach((row1, i) => {
//添加数组
this.addArr(this.multipleTable[i].fId);
})
}
})
},

在初始化页面的时候,会显示列表,在获取列表成功的回调里:
this.dataList = data.page.list //后台获取的列表数据
this.totalPage = data.page.totalCount //后台获取列表的总数
//循环总的列表数据
this.dataList.forEach((row, index) => {
//后台获取的已经选中的该表的值
for (let i = 0; i < this.chooseTable.length; i++) {
//如果总列表的数据和已经选中的该表的值,就选中回显在列表上
if(this.dataList[index].fId === this.chooseTable[i]){
this.KaTeX parse error: Expected '}', got 'EOF' at end of input: … this.refs.multipleTable.toggleRowSelection(row, true);
})
}
}
})
//用数组记录一下当前页的数据,(用于全选和全部取消)
this.lastTimeArr = this.dataList;

以上的两个方法,一个是用来查询全部的列表的信息并且是分页查询的,另一个是用来查询已经选中过的该列表里的数据,两个用来对比,让已经选中的数据回显选中在列表页里。
#############################################################
在表格里加一个方法: @select = “onTableSelect”
用来获取用户选中的表格的值,定义一个数组,用来实时记录用户选中了哪些。
选中就用下面的方法添加进数组,取消选中的话就用下面的方法移除选中的信息,这样,保证数组里存在的是选中的数据。

//判断是选中还是取消选中
onTableSelect(rows, row){
//如果为true表示勾选,为false或者0表示取消勾选
if(rows.length && rows.indexOf(row) !== -1){
this.addArr(row.fId);
}else{
this.removeArr(row.fId);
}
},
//添加选中的数组
addArr(id){
if(this.chooseTable.length !== 0){
if(this.chooseTable.indexOf(id) === -1){
this.chooseTable.push(id);
}
}else{
this.chooseTable.push(id);
}
},
//移除选中的数组
removeArr(id){
for(var i = 0; i < this.chooseTable.length; i++){
if(this.chooseTable[i] === id){
this.chooseTable.splice(i,1);
}
}
},

上面的是点击某一行的复选框的时候的方法。
下面的这个是点击全选框的时候:
selectAll(selection){
//全部选中
if(selection.length > 0){
for(let i=0;i < selection.length;i++){
this.addArr(selection[i].fId);
}
}else{
//取消选中
for(let j=0;j < this.lastTimeArr.length;j++){
this.removeArr(this.lastTimeArr[j].fId);
}
}
},
el ui的全选方法,在取消的时候会返回空的数组,就导致我们不知道他取消选中了哪些数据,这时我们就用当前页的数据做对比,移除取消选中的数据。

最后把选中的数组传到后台,做逻辑处理!!!!!!!!!!!!

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值