页面跳转反显(点击项,点击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(如果账号被挤掉,退出的时候需要多考虑一下)
实现思路是这样,具体代码要根据实际项目开发