首页 新闻 搜索 专区 学院

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>
Lsever的主页 Lsever | 初学一级 | 园豆:122
提问于:2020-05-21 22:41
< >
分享
最佳答案
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
sjxinghan | 小虾三级 |园豆:502 | 2020-05-25 10:36

感谢,解决了,是索引出错了

Lsever | 园豆:122 (初学一级) | 2020-05-25 13:43

@Lsever: 标记下解决,拿个豆子嘿嘿

sjxinghan | 园豆:502 (小虾三级) | 2020-05-25 14:23
其他回答(1)
0
<el-pagination
        class="fy"
        layout="prev, pager, next"
        @current-change="current_change"
        :total="total"
        background
></el-pagination>

是否需要增加

:current-page="currentPage"
RosonJ | 园豆:3740 (老鸟四级) | 2020-05-22 10:21

不是呢,增加了也没效果

支持(0) 反对(0) Lsever | 园豆:122 (初学一级) | 2020-05-22 18:44
清除回答草稿
   您需要登录以后才能回答,未注册用户请先注册