好资源导航 » 文章资讯 » elementUI多选框反选的实现代码

elementUI多选框反选的实现代码

2023-08-25 03:22:05 52

最近有一个需求，点击添加按钮，弹出窗口（窗口显示多选、可翻页、可检索列表），选中多条信息，当我点击确定按钮，把选中信息显示在页面上；点击取消，选中信息不显示在页面上。再次打开，把在页面上的信息显示选中状态。

思路：一开始选用elementUI官网例子,使用selection-change，但是它只显示当前改变的选择，不能满足我翻页及检索后还能选中数据的问题

toggleSelection(rows){
if(rows){
rows.forEach(row=>{
this.$refs.multipleTable.toggleRowSelection(row);
});
}else{
this.$refs.multipleTable.clearSelection();
}
}

后来查询api，发现了另外2个api，页面上的存在本地字段glht，列表上选中的存在本地字段yglht.

每次要计算页面显示的数据是列表的第几条数据，直接把对象放里面并不会勾选我上传选中的数据。

emmm....知道有点蠢，但是我还没想到别的办法...

弹框：







搜索
清空

确定取消

methods里，全选时与选中单个时所做的操作：

//全选当val有数据，即为全选；为空数组，即为取消全选
handleSelectionAll(val){
//获取所有选中的数据
this.records=JSON.parse(localStorage.getItem('glht'))
if(val.length!==0){
//全选
//this.records=Array.from(newSet(val.concat(this.records)))发现去重不好用！只能手动push了
//全选选中的一定是本页所有数据，所以循环本页
this.tableData.forEach((v)=>{
if(this.records.find((e,index)=>{returnv.id_===e.id_})){}else{
//如果数组中没有就把选中的push进去
this.records.push(v)
}
})
}else{
//取消全选，在选中的所有信息中把本页列表有的删除
this.tableData.forEach((v)=>{
this.records.forEach((e,index)=>{
if(e.id_===v.id_){
this.records.splice(index,1)
}
})
})
}
//每次选的数据暂时存一下
localStorage.setItem('glht',JSON.stringify(this.records))
},
//单选
handleSelectionChange(val,row){
//获取所有选中的数据
this.records=JSON.parse(localStorage.getItem('glht'))
if(this.records.length===0){
//还没有选中任何数据
this.records=[row]
}else{
if(this.records.filter(i=>{returni.id_===row.id_}).length===0){
//已选中的数据里没有本条(取消)，把这条加进来
this.records.push(row)
}else{
//已选中的数据里有本条(取消选中)，把这条删除
this.records.forEach((e,index)=>{
if(e.id_===row.id_){
this.records.splice(index,1)
}
})
}
}
//每次选的数据暂时存一下
localStorage.setItem('glht',JSON.stringify(this.records))
},

methods里，获取弹出框列表与选中数据：

listGet(){
this.$axios.post("interface",{},{params:searchData}).then(res=>{
if(res.data.success){
this.tableData=res.data.data.rows;
this.page.total=res.data.data.total;
this.records=JSON.parse(localStorage.getItem('yglht'))
this.toggleSelection(JSON.parse(localStorage.getItem('yglht')));//反选操作
}else{
this.$message.error(res.data.message)
}
})
.catch(err=>console.log(err));
},
//反选处理
toggleSelection(rows){
letarr=[]
this.tableData.forEach((e,index)=>{
rows.forEach((i,ind)=>{
if(e.id_===i.id_){
arr.push(this.tableData[index])
}
})
})
if(arr){
this.$nextTick(()=>{
arr.forEach(row=>{
this.$refs.multipleTable.toggleRowSelection(row);
});
})
}else{
this.$refs.multipleTable.clearSelection();
}
},

methods里，保存与取消单个时所做的操作：

save(){
this.glht_modal=false
localStorage.setItem('yglht',localStorage.getItem('glht'))
this.yglht()
},
cancel(){
this.glht_modal=false
//取消时取在页面上的值
localStorage.setItem('glht',localStorage.getItem('yglht'))
//this.toggleSelection(JSON.parse(localStorage.getItem('yglht')));直接写不好用
this.listGet({})//获取弹出框列表数据，这里调用一次是因为防止再次打开弹出框闪现之前选择的内容
this.yglht()
},
yglht(){
this.list=JSON.parse(localStorage.getItem('yglht'))
//处理this.list中地址、时间等页面显示问题
}

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。

声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。

返回顶部
514930285
czq8825@qq.com

elementUI多选框反选的实现代码

热门推荐

随机推荐