vue项目使用localStorage保存翻页前的勾选遇到的问题
0
悬赏园豆：50
[已解决问题]
解决于 2020-05-25 14:29
需求：比如当前页是第一页，勾选数据后翻到第二页，当从第二页再返回第一页的时候，希望之前在第一页的勾选仍然可以保留。
遇到的问题：
翻页后返回，从本地存储提取的勾选的id会自动加一。相当于我在第一页勾选的是第一个选项，翻到第二页再翻回第一页，之前在第一页的勾选变成了第二个选项
如下，存储的是id：7，但当翻页后再返回勾选页，id会变成8
有大神知道吗？提小弟一手，非常感谢！！
以下是全部代码
<template>
<div class="title">
<span>总数量：3223个</span>
<el-button icon="el-icon-setting" class="fl">操作</el-button>
<el-select v-model="value5" multiple placeholder="标记" class="fl">
<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option>
</el-select>
<el-select v-model="value5" multiple placeholder="筛选项" class="fl">
<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option>
</el-select>
<div class="demo-input-suffix fl">
<el-input placeholder="请输入APP名称或运营商名称" prefix-icon="el-icon-search" v-model="input21"></el-input>
</div>
<div class="container_table">
<el-table
ref="multipleTable"
:data="tableData.slice((currentPage-1)*pagesize,currentPage*pagesize)"
stripe
:row-key="getRowKeys"
style="width: 100%"
@selection-change="handleSelectionChange"
:default-sort="{prop: 'date', order: 'descending'}"
>
<el-table-column type="selection" width="55"></el-table-column>
<el-table-column prop="appname" label="APP名称" sortable width="180"></el-table-column>
<el-table-column prop="apkname" label="包名" width="180"></el-table-column>
<el-table-column prop="type" sortable label="类型"></el-table-column>
<el-table-column prop="comp_name" sortable label="运营企业名称"></el-table-column>
<el-table-column prop="type_number" label="版本号"></el-table-column>
<el-table-column prop="update_date" sortable label="更新时间"></el-table-column>
<el-table-column prop="download_num" sortable label="下载量（万）"></el-table-column>
<el-table-column label="操作">
<template slot-scope="scope">
<el-button type="primary" icon="el-icon-star-on" v-if="istag" @click="switchChange"></el-button>
<el-button type="primary" icon="el-icon-star-off" v-else @click="switchChange"></el-button>
</template>
</el-table-column>
</el-table>
<el-pagination
class="fy"
layout="prev, pager, next"
@current-change="current_change"
:total="total"
:current-page="currentPage"
background
></el-pagination>
</div>
</div>
</template>
<script>
export default {
name: "list11",
data() {
return {
total: 1000, //默认数据总数
pagesize: 9, //每页的数据条数
currentPage: 1, //默认开始页面
istag: true,
input: "",
input21: "",
subcurrentPage: "",
multipleSelection: [],
options: [
{
value: "选项1",
label: "黄金糕"
},
{
value: "选项2",
label: "双皮奶"
},
{
value: "选项3",
label: "蚵仔煎"
},
{
value: "选项4",
label: "龙须面"
},
{
value: "选项5",
label: "北京烤鸭"
}
],
value5: [],
tableData: [
{
id: "1",
appname: "1喵喵直播",
apkname: "1bdkdl",
type: "3视频直播",
comp_name: "1广大科技公司",
type_number: "1V1.2",
update_date: "12016-05-02",
download_num: "123.6"
},
{
id: "2",
appname: "2喵喵直播",
apkname: "2bdkdl",
type: "2视频直播",
comp_name: "2广大科技公司",
type_number: "2V1.2",
update_date: "22016-05-02",
download_num: "223.6"
},
{
id: "3",
appname: "3喵喵直播",
apkname: "1bdkdl",
type: "3视频直播",
comp_name: "3广大科技公司",
type_number: "3V1.2",
update_date: "32016-05-02",
download_num: "323.6"
},
{
id: "4",
appname: "4喵喵直播",
apkname: "4bdkdl",
type: "4视频直播",
comp_name: "4广大科技公司",
type_number: "4V1.2",
update_date: "42016-05-02",
download_num: "423.6"
},
{
id: "5",
appname: "4喵喵直播",
apkname: "4bdkdl",
type: "4视频直播",
comp_name: "4广大科技公司",
type_number: "4V1.2",
update_date: "42016-05-02",
download_num: "423.6"
},
{
id: "6",
appname: "4喵喵直播",
apkname: "4bdkdl",
type: "4视频直播",
comp_name: "4广大科技公司",
type_number: "4V1.2",
update_date: "42016-05-02",
download_num: "423.6"
},
{
id: "7",
appname: "4喵喵直播",
apkname: "4bdkdl",
type: "4视频直播",
comp_name: "4广大科技公司",
type_number: "4V1.2",
update_date: "42016-05-02",
download_num: "423.6"
},
{
id: "8",
appname: "4喵喵直播",
apkname: "4bdkdl",
type: "4视频直播",
comp_name: "4广大科技公司",
type_number: "4V1.2",
update_date: "42016-05-02",
download_num: "423.6"
},
{
id: "9",
appname: "4喵喵直播",
apkname: "4bdkdl",
type: "4视频直播",
comp_name: "4广大科技公司",
type_number: "4V1.2",
update_date: "42016-05-02",
download_num: "423.6"
},
{
id: "10",
appname: "4喵喵直播",
apkname: "4bdkdl",
type: "4视频直播",
comp_name: "4广大科技公司",
type_number: "4V1.2",
update_date: "42016-05-02",
download_num: "423.6"
},
{
id: "11",
appname: "4喵喵直播",
apkname: "4bdkdl",
type: "4视频直播",
comp_name: "4广大科技公司",
type_number: "4V1.2",
update_date: "42016-05-02",
download_num: "423.6"
},
{
id: "12",
appname: "4喵喵直播",
apkname: "4bdkdl",
type: "4视频直播",
comp_name: "4广大科技公司",
type_number: "4V1.2",
update_date: "42016-05-02",
download_num: "423.6"
},
{
id: "13",
appname: "4喵喵直播",
apkname: "4bdkdl",
type: "4视频直播",
comp_name: "4广大科技公司",
type_number: "4V1.2",
update_date: "42016-05-02",
download_num: "423.6"
},
{
id: "14",
appname: "4喵喵直播",
apkname: "4bdkdl",
type: "4视频直播",
comp_name: "4广大科技公司",
type_number: "4V1.2",
update_date: "42016-05-02",
download_num: "423.6"
},
{
id: "15",
appname: "4喵喵直播",
apkname: "4bdkdl",
type: "4视频直播",
comp_name: "4广大科技公司",
type_number: "4V1.2",
update_date: "42016-05-02",
download_num: "423.6"
},
{
id: "16",
appname: "4喵喵直播",
apkname: "4bdkdl",
type: "4视频直播",
comp_name: "4广大科技公司",
type_number: "4V1.2",
update_date: "42016-05-02",
download_num: "423.6"
},
{
id: "17",
appname: "4喵喵直播",
apkname: "4bdkdl",
type: "4视频直播",
comp_name: "4广大科技公司",
type_number: "4V1.2",
update_date: "42016-05-02",
download_num: "423.6"
}
]
};
},
methods: {
switchChange() {
this.istag = !this.istag;
},
//点击翻页触发
current_change(currentPage) {
//当前页
this.currentPage = currentPage;
//获取当前页的本地存储
let storage = JSON.parse(
localStorage.getItem(`${this.currentPage}`)
);
if (storage) {
//每次翻页提取当前页的本地存储，勾选之前选中的 (为什么每次翻页row.id会自动加一)
this.$nextTick(() => {
storage.forEach(row => {
this.$refs.multipleTable.toggleRowSelection(this.tableData[row.id]);
});
});
}
},
//绑定table的key
getRowKeys(row) {
return row.id;
},
//点击勾选框触发,当this.multipleSelection.length !== 0点击翻页也会触发
handleSelectionChange(val) {
this.multipleSelection = val
//离开页面判断是否有勾选，有就进行本地存储
if (this.multipleSelection.length !== 0) {
localStorage.setItem(
`${this.currentPage}`,
JSON.stringify(this.multipleSelection)
);
}
}
},
created() {
this.total = this.tableData.length;
}
};
</script>
最佳答案
0
//这个方法第一个参数是表格行,而你在这里使用row.id当索引，row.id是你的数据id，第一条是id是1，所以永远相差1
this.$refs.multipleTable.toggleRowSelection(this.tableData[row.id]);
//改成
storage.forEach((row,i) => {
this.tableData.forEach((t,j)=>{
if(row.id==t.id){
this.$refs.multipleTable.toggleRowSelection(t,true)
}
})
});
收获园豆：50
感谢，解决了，是索引出错了
@Lsever: 标记下解决，拿个豆子嘿嘿
其他回答(1)
0
<el-pagination
class="fy"
layout="prev, pager, next"
@current-change="current_change"
:total="total"
background
></el-pagination>
是否需要增加
:current-page="currentPage"
不是呢，增加了也没效果
