页面跳转反显(点击项,点击table滚动的位置,搜索条件,分页回显)

点击table tr项后,页面跳转到下级页面,返回回显搜索条件、当前页码、并将点击项select选中、滚动条也被记录回显跳转时滚动的位置

思路:

1.页面临时缓存我选择使用sessionStorage,点击tr行将搜索条件和页码,点击行的id进行存储;

setSessionStore (name, content) {
if (!name) return
if (typeof content !== 'string') {
content = JSON.stringify(content)
}
window.sessionStorage.setItem(name, content)
},
getSessionStore (name) {
if (!name) return;
var content = window.sessionStorage.getItem(name);
if (typeof content == 'string') {
content = JSON.parse(content)
}
return content;
},
removeSessionStore (name) {
if (!name) return
return window.sessionStorage.removeItem(name)
}
}

2.进入页面取出sessionStorage,在init请求返回值后,进行table选中、分页回显;

data(){
return {
paginationShow: false, 控制分页器显示 页面中使用v-if
pager:{
total: 0,
currentPage: 1,
pageSize: 20,
}
}
}

控制分页器显示的原因:vue-element-ui项目分页,在返回默认分页高亮样式不会回显......

造成的原因:我们返回当前页面取得总条数totalNum之前,element-ui的分页组件已经在页面加载完毕,当时的totalNum绑定的是data里面初始化的数据0,所以当总条数为0的时候,分页组件的页码默认为1。并且当totalNum在created生命周期里取得数据后,分页组件也不会刷新。所以这就导致, 页面内容正确,但是页码高亮依旧是第一页。

解决办法:我们需要在created之后刷新这个分页组件或者让分页组件的html后于created之后加载到页面。再次刷新这个分页组件是不现实的,我们选择在created之后加载分页组件。具体办法就是使用v-if。在totalNum不为data里面给的初始值0的时候,才让这段html加载到页面。

init () {
axios.post('/url',param).then(function (response) {
// 进行数据复制loading等操作
if(!myVM.paginationShow){
if(myVM.storeId){
**myVM.$nextTick(function(){**
var storage = [];
myVM.dataTable.forEach(function(item, index){
if(item.clueId === myVM.storeId ){
storage.push(myVM.dataTable[index]);
}
})
myVM.toggleSelection(storage);
// 根据存储的滚动位置,将table滚动位置回显在页面上
**myVM.$el.querySelector('.el-table__body-wrapper').scrollTop = mycustomVM.scrollTop; ** })
}
}else{
myVM.removeSessionStore ("storeForm");
myVM.removeSessionStore ("otherVal");
}
mycustomVM.paginationShow = true;
mycustomVM.storeForm = mycustomVM.form;
})
},
toggleSelection(rows) { // table select 默认选中
if (rows) {
rows.forEach(row => {
this.$refs.multipleTable.toggleRowSelection(row,true);
});
} else {
this.$refs.multipleTable.clearSelection();
}
},
toLink(row){ // 跳转进行存储
var clueId=row.clueId;
this.setSessionStore("storeForm", this.storeForm);
var otherVal = {
"currentPage": this.pager.currentPage,
"clueId": clueId,
"scrollTop": **this.$el.querySelector('.el-table__body-wrapper').scrollTop**
}
this.setSessionStore("otherVal", otherVal); window.location.href='跳转链接,可携带参数';
},
mounted(){
document.getElementById('myVue').style.display = 'block';
},
created(){ // 进入页面判断有是否有存储值,取出后,进行初始化init函数
if(!this.paginationShow){
var storeVal = this.getSessionStore("storeForm");
var otherVal = this.getSessionStore("otherVal");
if(storeVal && otherVal){
this.form = storeVal;
this.$set(this.pager,"currentPage",otherVal.currentPage);
this.storeId = otherVal.clueId;
this.scrollTop = otherVal.scrollTop;
}
}
}
window.sessionStorage.clear(); // 点击侧边栏、退出时-清除所有cookie(如果账号被挤掉,退出的时候需要多考虑一下)

实现思路是这样,具体代码要根据实际项目开发

Vue -- element-ui el-table 点击tr项页面跳转,返回后缓存回显点击项的更多相关文章

  1. vue + element ui 阻止表单输入框回车刷新页面

    问题 在 vue+element ui 中只有一个输入框(el-input)的情况下,回车会提交表单. 解决方案 在 el-form 上加上 @submit.native.prevent 这个则会阻止 ...

  2. Vue+element ui table 导出到excel

    需求: Vue+element UI table下的根据搜索条件导出当前所有数据 参考: https://blog.csdn.net/u010427666/article/details/792081 ...

  3. vue + element ui 表格自定义表头,提供线上demo

    前言:工作中用到 vue+element ui 的前端框架,需要使用自定义表头,需要使用 re.转载请注明出处:https://www.cnblogs.com/yuxiaole/p/9710826.h ...

  4. vue+element ui 的表格列使用组件

    前言:工作中用到 vue+element ui 的前端框架,有这个场景:很多表格的列有许多一样的,所以考虑将列封装为组件.转载请注明出处:https://www.cnblogs.com/yuxiaol ...

  5. vue+element ui 的tab 动态增减,切换时提示用户是否切换

    前言:工作中用到 vue+element ui 的前端框架,动态添加 Tab,删除 Tab,切换 Tab 时提示用户是否切换等,发现 element ui  有一个 bug,这里记录一下如何实现.转载 ...

  6. vue + element ui 实现实现动态渲染表格

    前言:之前需要做一个页面,能够通过表名动态渲染出不同的表格,这里记录一下.转载请注明出处:https://www.cnblogs.com/yuxiaole/p/9786326.html 网站地址:我的 ...

  7. vue+element ui 的上传文件使用组件

    前言:工作中用到 vue+element ui 的前端框架,使用到上传文件,则想着封装为组件,达到复用,可扩展.转载请注明出处:https://www.cnblogs.com/yuxiaole/p/9 ...

  8. vue+element ui 的时间控件选择 年月日时分

    前言:工作中用到 vue+element ui 的前端框架,需要选择年月日时分,但element ui官网demo有没有,所以记录一下.转载请注明出处:https://www.cnblogs.com/ ...

  9. Vue+Element UI 实现视频上传

    一.前言 项目中需要提供一个视频介绍,使用户能够快速.方便的了解如何使用产品以及注意事项. 前台使用Vue+Element UI中的el-upload组件实现视频上传及进度条展示,后台提供视频上传AP ...

随机推荐

  1. nginx 安全配置和限制访问

    nginx基本安全配置 配置ssl证书 listen 443 ssl; ssl_certificate /usr/local/nginx/conf/server.crt; ssl_certificat ...

  2. PCL学习(三) SAC-IA 估记object pose

    SAC-IA是基于RANSAC算法的对齐算法 通过降采样提高法向计算.FPFH特征的计算 最后通过SAC-IA计算得到对齐的旋转和平移 #include <Eigen/Core> #inc ...

  3. [转帖]使用TOAD优化复杂SQL

    独家秘笈!看下如何一键优化Oracle数据库复杂sql,DBA必备 https://www.toutiao.com/i6741208493644055053/ 原来toad 还有这种功能 感觉类似于 ...

  4. 剑指offer53:表示数值的字符串,字符串"+100","5e2","-123","3.1416"和"-1E-16"都表示数值。 但是"12e","1a3.14","1.2.3","+-5"和"12e+4.3"都不是

    1 题目描述 请实现一个函数用来判断字符串是否表示数值(包括整数和小数).例如,字符串"+100","5e2","-123","3 ...

  5. Vue起飞前的准备

    Vue起飞前的准备 一.什么是ECMAScript,以及es6的诞生? 1997年 ECMAScript 1.0 诞生 1999年12月 ECMAScript 3.0诞生,它 是一个巨大的成功,在业界 ...

  6. Java中自增(++)和赋值(=)运算效率比较

    前言   将一个int型数组x[]从初值0变成1.有两种做法: // 只考虑后自增 int length = x.length; for (int i = 0; i < length; i++) ...

  7. MySQL部分2

  8. Sharding-Jdbc 插件应用

    Sharding-Jdbc介绍 Sharding-Jdbc在3.0后改名为Shardingsphere它由Sharding-JDBC.Sharding-Proxy和Sharding-Sidecar(计 ...

  9. python 切换虚拟环境

    每次电脑重启后,都要切入虚拟环境,命令总是忘记.如果使用IDE,可以指定interpeter方便的切换. 首先conda info --env  查看当前有几个环境 激活/禁用环境 source ac ...

  10. DataGridView绑定数据、删除数据

    定义学生类: using System; using System.Collections.Generic; using System.Linq; using System.Text; using S ...