elementui实现跳转别的页面返回后分页以及搜索条件仍然不变

最新推荐文章于 2024-08-06 12:37:20 发布

于丸

最新推荐文章于 2024-08-06 12:37:20 发布

阅读量1.1k

点赞数

CC 4.0 BY-SA版权

分类专栏： elementui

本文链接：https://blog.youkuaiyun.com/Ych_cxy/article/details/100576806

elementui 专栏收录该内容

15 篇文章

订阅专栏

本文探讨了前端应用中状态管理的重要性，特别是在涉及搜索功能时。通过使用Vue.js的生命周期钩子mounted，我们实现了页面加载时自动恢复上一次的搜索条件和页面设置，包括页数、每页显示数量及搜索数据。同时，通过watch监听器实时更新搜索条件，并在用户进行搜索时清除临时数据，确保每次搜索的准确性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

mounted(){
            this.getStorage()
            if(sessionStorage.getItem("page")){
                this.dangqianye = Number(sessionStorage.getItem("page"))
            }
            if(sessionStorage.getItem("pageSize")){
                this.pageSize = Number(sessionStorage.getItem("pageSize"))
            }
            //如果点击过搜索
            if(sessionStorage.getItem("search_data")){
                this.list(JSON.parse(sessionStorage.getItem("search_data")))
            }else{
                this.list()
            }

            //如果有no_data赋值no_data没有赋值data
            if(sessionStorage.getItem("no_search_data")){
                this.form = JSON.parse(sessionStorage.getItem("no_search_data"))
            }else if(sessionStorage.getItem("search_data")){
                this.form = JSON.parse(sessionStorage.getItem("search_data"))
            }

        },

//form是搜索的条件
 watch:{
 //只要form里的值变了就存临时的
    'form':{
        handler(n) {
            sessionStorage.setItem("no_search_data",JSON.stringify(this.form))
        },
        deep:true
    }
},

//点击搜索的方法
search(){
//如果有临时的值删除
   if(sessionStorage.getItem("no_search_data")){
        sessionStorage.removeItem("no_search_data")
    }
    //保存搜索的值
    sessionStorage.setItem("search_data",JSON.stringify(this.form))
    this.dangqianye = 1
    this.list(this.form)
},

			handleSizeChange(val) {
                console.log(`每页 ${val} 条`);
                this.dangqianye = 1
                sessionStorage.setItem("pageSize",val)
                this.pageSize = val
                if(sessionStorage.getItem("search_data")){
                    this.list(JSON.parse(sessionStorage.getItem("search_data")))
                    return
                }
                this.list()
            },
            handleCurrentChange(val) {
                console.log(`当前页: ${val}`);
                sessionStorage.setItem("page",val)
                this.dangqianye = val
                if(sessionStorage.getItem("search_data")){
                    this.list(JSON.parse(sessionStorage.getItem("search_data")))
                    return
                }
                this.list()
            }

list(search){
	//列表的ajax
}