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

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
}
要在 Element UI 中实现按钮跳转页面的功能,你可以使用 `<el-button>` 组件,并结合路由功能来实现。下面是一个示例: 1. 首先,确保你已经安装了 Vue Router 和 Element UI。 2. 在你的 Vue 组件中,引入所需的库和组件: ```javascript import Vue from 'vue' import Router from 'vue-router' import ElementUI from 'element-ui' import 'element-ui/lib/theme-chalk/index.css' Vue.use(Router) Vue.use(ElementUI) ``` 3. 在 Vue Router 的配置文件中,定义你的路由: ```javascript import Vue from 'vue' import Router from 'vue-router' import HomePage from '@/components/HomePage.vue' import AboutPage from '@/components/AboutPage.vue' Vue.use(Router) export default new Router({ routes: [ { path: '/', name: 'Home', component: HomePage }, { path: '/about', name: 'About', component: AboutPage } ] }) ``` 4. 在你的页面组件中,使用 `<el-button>` 组件,并通过 `this.$router.push()` 方法来实现页面跳转: ```html <template> <div> <el-button type="primary" @click="goToHomePage">Go to Home</el-button> <el-button type="primary" @click="goToAboutPage">Go to About</el-button> </div> </template> <script> export default { methods: { goToHomePage() { this.$router.push('/') }, goToAboutPage() { this.$router.push('/about') } } } </script> ``` 在上述示例中,我们定义了两个按钮,分别触发 `goToHomePage` 和 `goToAboutPage` 方法,在方法中使用 `this.$router.push()` 方法进行路由跳转。 这样,当你点击这些按钮时,页面就会根据定义的路由配置进行跳转。 希望这个示例能帮助到你实现按钮跳转页面的功能!
评论 4
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值