Vue + Element UI 表格分页记忆选中,分页切换 页面打勾不丢失
方法一:
官方也有基于这种操作给出通过属性解决的方法:
<el-table :row-key="rowKey">
<el-table-column type="selection" :reserve-selection="true"></el-table-column>
</el-table>
methods: {
rowKey (row) {
return row.id
}
}
首先官网中对参数的描述是这样的:
:row-key :行数据的 Key,用来优化 Table 的渲染;在使用 reserve-selection 功能与显示树形数据时,该属性是必填的。类型为 String 时,支持多层访问:user.info.id
,但不支持 user.info[0].id
,此种情况请使用 Function
。
:reserve-selection :仅对 type=selection 的列有效,类型为 Boolean,为 true 则会在数据更新之后保留之前选中的数据(需指定 row-key),该属性默认值为false
知道这些了,同时你还需要
toggleRowSelection和clearSelection两个属性。
toggleRowSelection:
参数:row, selected
用于多选表格,切换某一行的选中状态,如果使用了第二个参数,则是设置这一行选中与否(selected 为 true 则选中)
clearSelection:用于多选表格,清空用户的选择。
结合这四个属性可以实现基本的表格选中,分页打勾留存状态,但是对于一些非常规操作打勾却不是很适用。
我遇到的需求是这样的首先在页面表格中点击 加号(图一),数据表格的弹窗会打开(图二),在弹窗中勾选需要的数据可以分页去选择,然后点击确定将选中的数据塞回页面的表格中(图一),再次点击 加号 弹窗打开 页面表格中的数据打勾情况会回显在弹窗中(图二)。
方法二:
我选用的方法分别是表格的两个选中方法 select和select-all,toggleRowSelection方法,整体的逻辑
1.单选时,判断临时存储的数组是否为空,为空则直接push,不为空则判断页面中是否存在该数据,存在则剪切掉代表取消打勾,不存在则push进去。
2.全选时,判断参数val是否存在,存在即是代表全部选中,直接push到临时数组,然后进行数组去重即可,如果val为空,则是代表全取消,因为选中的是当前页面的数据,所以直接从临时数组中删掉当前分页页面的数据即可。
3.最后要做的就是在每次数据加载的时候 使用toggleRowSelection的方法,让弹窗中的数据回显
来上代码:
<el-table
ref="multipleGoodsList"
@select="handleSelect"
@select-all="handleSelectAll"
>
<el-table-column type="selection"></el-table-column>
</el-table>
export default {
data() {
return {
goodsList: [], //弹窗中每次请求的页面数据
selectedGoodsList:[]//临时选中的数组
selectedGoods:[] //页面中的表格
}
},
methods: {
//获取弹窗内的数据
getGoodsListFun() {
...
// 拿到数据后
// 当再次打开
this.$nextTick(() => {
if (this.selectedGoodsList.length && this.selectedGoodsList.length > 0) {
this.goodsList.forEach(row => {
this.selectedGoodsList.forEach(p => {
if (row.id === p.id) {
this.$refs.multipleGoodsList.toggleRowSelection(row);
}
});
});
}
});
...
},
//单选
handleSelect(selection,row){
if(this.selectedGoodsList.length && this.selectedGoodsList.length >0){
let index
index = this.isSelectedGoods(row, this.selectedGoodsList)
if (index > -1) {
this.selectedGoodsList.splice(index, 1);
} else {
this.selectedGoodsList.push(row);
}
}else{
this.selectedGoodsList.push(row)
}
},
//判断是否存在的方法
isSelectedGoods(row, list) {
let rows = JSON.parse(JSON.stringify(row))
//是否选取 -1表示没选中
return list.findIndex(item => {
return item.id == rows.id;
});
},
//全选
handleSelectAll(val){
//全选
if(val && val.length > 0){
val.forEach(row=>{
this.selectedGoodsList.push(row)
})
//数组去重
let newData = {};
this.selectedGoodsList = this.selectedGoodsList.reduce((preVal, curVal) => {
newData[curVal.id]? "": (newData[curVal.id] = true && preVal.push(curVal));
return preVal;
}, []);
}else{
//全不选 直接从数组中删除当页的数据
for(let i = 0;i<this.goodsList.length;i++){
let index
index = this.isSelectedGoods(this.goodsList[i], this.selectedGoodsList)
if (index > -1) {
this.selectedGoodsList.splice(index, 1);
} else {
this.selectedGoodsList.push(this.goodsList[i]);
}
}
}
},
//弹窗上的确定选择按钮
choiceGoodsFun() {
this.selectedGoods = JSON.parse(JSON.stringify(this.selectedGoodsList))
this.closeDialog();
},
//关闭弹窗
closeDialog(){
this.selectedGoodsList = [];
},
//打开弹窗
openDialog(){
this.selectedGoodsList = JSON.parse(JSON.stringify(this.selectedGoods));
}
}
项目着急临时想的方法,欢迎有更好的方法的大佬指教
更多推荐
所有评论(0)