ElementUI tab刷新留在当前tab的解决方法

最新推荐文章于 2023-08-18 15:01:52 发布
最新推荐文章于 2023-08-18 15:01:52 发布
阅读量769 收藏
点赞数 1
文章标签： vue.js elementui
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/leraning_/article/details/128107632
版权

 默认是当刷新页面时，会回到打包的tab

想实现的是当我点击二手物品，页面刷新后，仍留在二手物品tab:

先在tab添加v-model和点击时间还有name:

其次在data里定义 activeName:'pack'，默认为pack的tab

 在methods里定义

当点击了tab后，浏览器会生成会话：

然后在用created来判断和获取就可以实现停留在当前tab了

 

 

leraning_
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
bootstrap 选项卡,刷新 ,tab页选中不改变,不切换选项卡,仍停留在当前选项
闲时不练功，忙时一场空
12-29 2812
在页面的 js 代码里引入下面这段代码 /*Bootstrap 3：在页面刷新时保持选中的选项卡*/ $(document).ready(function () { if (location.hash) { $("a[href='" + location.hash + "']").tab("show"); } $(document.body...
tab选项卡切换后 刷新页面如何停留在当前选项卡页面
热门推荐
卡卡罗特的博客
03-27 2万+
在项目中经常用到标题tab选项卡，来切换不同的内容，但是每次刷新后，都会回到默认显示页，如果在其他页面执行操作后刷新，跑到默认页而不是当前页，就很恶心了。本例主要是是利用H5的，sessionStorage缓存，来记录下标，从而在页面刷新时，回到相应的页面。记得引用JQuery,代码如下。css基于layui.css <div class="layui-tab layui-tab-brief...
页面刷新后，tab记住刷新前位置
似水流年
09-29 1万+
最近两周，时间颇赶，源于对自己身为一个前端的不自信，感觉自己不会的很多。两周过去了，项目如期完成，我来踩坑了。剩余的颇多不足就慢慢完善吧！ 今天遇到一个问题，页面刷新后，对于有tab按钮的页面，每次刷新都默认回到第一个，自己都烦了，想想是别人使用，估计会更烦。于是就百度踩坑呀。 效果图镇楼： 主要使用到Session Storage，浏览器缓存原理。 打开调试器： 能看到缓存值： ...
bootstrap切换tab页局部刷新_bootstrap在 刷新页面，tab选择页面不会改变。
weixin_39753213的博客
12-19 727
您可以直接复制代码 注意在同级别文件夹中引用 相应js 和 css。实现tab影响 关键看bootstrap的 data-toggle= tab$(document).ready(function() {if(location.hash) {$('a[href=' + location.hash + ']').tab('show');}$(document.body).on("click", "a...
跳转到tab页面，第一次可以跳转到对应的，第二次之后跳转的还是第一次点击的页面
w1939459的博客
10-25 437
问题：第一次可以跳转到对应的tab页面，第二次之后跳转的还是第一次点击的页面，在mounted中只能打印到一次mounted，获取传过来的数据也是 只能打印一次。是做keep-live了缓存了。把方法放在actived里面。因为没走mounted函数。
解决elementUI 切换tab后 el_table 固定列下方多了一条线问题
10-15
本文将深入探讨如何解决在切换ElementUI的tab页后，`el_table`的固定列下方出现多余线条的问题，以及与之相关的固定列显示不全的场景。 首先，让我们分析问题的现象：在切换ElementUI的tab组件时，`el_table`的固定...
网页防止tab键的使用快速解决方法
01-19
在一些网页或者说在弹出层的使用下，一般情况在ie浏览器下 我们都不希望使用tab 或者说  使用tab键后都会造成一定的问题，例如： 在弹出层后，tab键还可以在目页中操作，这回导致脚本错误。 那么我们如果避免这种...
基于Vue实现tab栏切换内容不断实时刷新数据功能
08-30
在这个例子中，`tab`方法用于处理Tab的切换，它会清除当前的定时器，更新`currentIndex`，然后为新Tab设置定时器。`mounted`生命周期钩子用于在组件挂载完成后执行一次，这里我们用它来初始化第一个Tab的数据请求。 ...
Vue解决echart在element的tab切换时显示不正确问题
10-15
总的来说，解决Vue中ECharts在Element Tab切换时显示不正确的问题，主要是通过合理控制图表的渲染时机，确保ECharts在有准确容器尺寸的情况下初始化或更新图表。利用Vue的响应式系统，如`v-if`，可以帮助我们轻松...
在layui tab控件中载入外部html页面的方法
12-29
目前，潜入外部网页的方式，主要有3种： iframe方式 <div><iframe src=xxx.jsp></iframe> ajax方式 “externalHtml> ajax加载数据后，直接赋予 ...<div class=layui-tab lay-filter=demo lay-data={>
vue-element-admin项目中实现刷新tab标签不丢失
九段刀客的博客
12-11 8041
mounted() { // 页面刷新前缓存和赋值 this.beforeUnload(); }, methods:{ // 刷新前缓存tab beforeUnload() { // 监听页面刷新 window.addEventListener("beforeunload", () => { // visitedVie...
element的tab页刷新页面保存当前tab页面状态
qq_45213494的博客
08-30 1378
element的tab页刷新页面保存当前tab页面状态 做项目的时候遇到一个的问题，element-ui中Tabs 组件提供了选项卡功能，默认选中第一个标签页，在标签页较多的情况下，每次刷新页面都会回到默认页，这样就得来回点很麻烦。。。 解决这个问题就是需要在本地存储，sessionStorage或者localStorage都可以！ 《方法一》 <template> <el-tabs v-model="activeName" @tab-click="handleClick"&gt
tabs刷新当前页面
pm_mybook的博客
12-09 1130
$("document").ready(function(){ var tabs = $("#main").tabs().tabs('tabs'); var title = ""; for (var i = 0; i < tabs.length; i++) { ///以下代码是为页签动态绑定单击事件 tabs[i].panel('options').tab.u
页面跳转时，想要弹出一个新的tab页，而不是跳转到原有的tab页
最新发布
Carrie_ali的博客
08-18 317
把获取到的id,传进去，小编这里的id，传的是row.deploymentId，你们可以根据自己从数据中拿到的id传进去。点击跳转时，每次都会传入不同的id，这样每次跳转的路由就不一样了，所以就不会跳转到之前已有的tab页面了。我们在原有的 path: 'definition/model' , 后面加入id 做为唯一标识。1.可以在路由跳转时，配置一个标识符。2.在router.js文件中。
bootstrap table表格前台分页，点击tab选项，重新刷新表格
weixin_34315665的博客
08-03 566
近期做项目的时候使用bootstrap表格前台分页，并且有一个tab切换选项，共用一个table，效果如下图，上方是tab选项，下方是table: 在实际实现的时候，在默认状态下，表格翻到了第5页，此时我要按年龄进行筛选，刚开始我的做法是直接$("#table").bootstrapTable('refresh',option)；option里边是一个筛选的条件，这样的效果是页面会展示所选条...
element-plus的el-tabs切换后，刷新浏览器状态丢失
一枚小趴菜(´▽`)ﾉ
11-25 1783
原因：当浏览器刷新后，v-model绑定的数据也会重置，所以选中的状态会丢失。
qtabwidget切换tab事件_element的tab页刷新页面保存当前tab状态
weixin_39575007的博客
12-19 1894
pc端项目大致做完了， 测试人员在测试的时候提出让tab页在浏览器刷新之后回到当前操作的页面，本来想回应问题不大，不用这么改吧？系统里面这么多tab，难道都要添加？结果产品消息就发来了，觉得这个建议很有道理，就改下吧，辛苦辛苦！那，我就改下呗。。。 原本以为element官网会有什么属性用来保存tab页的状态，后来发现没有，那就用sessionStorage来实现吧。...
（记录笔记15）——15.3 页面刷新面包屑
小李科技
12-27 836
15.3 页面刷新面包屑 这里主要讲解课程完成后,我对项目错误的一些修正 文章目录15.3 页面刷新面包屑一 问题分析二 思路分享三 尝试代码四 实例代码 Github地址 在之前的代码中, 我们刷新页面后,面包屑会恢复为&quot;首页&quot;,如下图: 在演示项目中: http://imoocms.51purse.com/是没有这个问题的, 那么如何解决这样的问题呢? 一 问题分析 react ...
点击tab刷新页面_element的tab页刷新页面保存当前tab状态
weixin_42160252的博客
01-27 1877
pc端项目大致做完了， 测试人员在测试的时候提出让tab页在浏览器刷新之后回到当前操作的页面，本来想回应问题不大，不用这么改吧？系统里面这么多tab，难道都要添加？结果产品消息就发来了，觉得这个建议很有道理，就改下吧，辛苦辛苦！那，我就改下呗。。。 原本以为element官网会有什么属性用来保存tab页的状态，后来发现没有，那就用sessionStorage来实现吧。...
elementui tab原理
06-01
ElementUI中的Tab组件基于Vue.js框架开发，其原理是通过Vue组件的数据驱动来实现。 具体来说，Tab组件包含一个Tab栏和多个Tab内容区域。Tab栏由多个Tab选项卡组成，每个选项卡包含一个标题和一个对应的内容区域。当...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值