vue+elementui实现下拉框及页面刷下

最新推荐文章于 2025-03-13 18:08:39 发布

瑞比ya

最新推荐文章于 2025-03-13 18:08:39 发布

阅读量2.2k

点赞数

文章标签： vue.js

本文链接：https://blog.youkuaiyun.com/weixin_46554787/article/details/108504272

版权

本文介绍了如何在Vue+ElementUI环境下实现下拉框功能以及页面刷新后保持状态。首先，阐述了在首页地图中点击地址跳转到详情页并存储数据到sessionStorage的场景。接着，讲解如何在顶部导航添加下拉框，并在mounted阶段从sessionStorage获取默认值。最后，通过监听下拉框的change事件，实现内容切换并与sessionStorage中的code码进行比较。

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

vue+elementui实现下拉框及页面刷下

1、应用场景：首页是一幅地图，地图中有相应的地址，点击相应的地址会跳转到相应的页面
在这里插入图片描述

![在这里插入图片描述](https://img-blog.csdnimg.cn/20200909225727248.png#pic_center![在这里插入图片描述](https://img-blog.csdnimg.cn/20200909231645141.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NjU1NDc4Nw==,size_16,color_FFFFFF,t_70#pic_center

详情页按钮点击事件

把code码存储在sessionStorage中，在要展示的页面使用
sessionStrage.getItem()方法去出
2、在顶部导航添加下拉框

![在这里插入图片描述](https://img-blog.csdnimg.cn/20200909230219593.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NjU1NDc4Nw==,size_16,color_FFFFFF,t_70#pic_center
下拉框内默认值在mounted()中设置（从sessionStorage中取名字）
this.selectvalue = sessionStorage.getItem(“enterpriseName”);
在下拉框中写@change事件，并且判断当前的code与sessionStorage中的code码是否相等，相等并赋值
在这里插入图片描述
3、切换下拉框内容页面进行相应的切换（答案此链接中）
https://segmentfault.com/a/1190000017007631