*问题描述:*遇到一个需求,使用el-tabs里面引入了4个子组件,在其中某一个子组件刷新的之后,总是tab选中默认的el-tab-pane label,需要变成选中刷新之前的el-tab-pane label
父组件中 tab下面引入了3个组件
<template>
<el-tabs v-model="activeName" @tab-click="handleClick">
<el-tab-pane label="子组件1" name="first">
<child1></child1>
</el-tab-pane>
<el-tab-pane label="子组件2" name="first">
<child1></child1>
</el-tab-pane>
<el-tab-pane label="子组件3" name="first">
<child1></child1>
</el-tab-pane>
</el-tabs>
</template>
export default {
data() {
return {
activeName: 'first'
};
},
methods: {
handleClick(tab, event) {
console.log(tab, event);
}
}
};
子组件3中,修改完之后,需要进行刷新,这边是刷新整个父组件(如果是单独刷新子组件,应该就不会出现我这样的问题了),但是刷新之后,就会默认选中子组件1,交互不是很好,思路想办法保存当前的activeName的值,采用sessionStorage
子组件3中修改成功之后
update function(){
//更新页面
//保存当前activeName
sessionStorage.setItem('currentTab', 'third')
}
然后在父组件的钩子方法中
mounted() {
// debugger
let name = sessionStorage.getItem('currentTab')
// 这里如果没值,返回的是字符串'undefind'
if (name != "undefined" && name){
this.activeName = name;
}
}
上面问题记录下,有不正确的,欢迎指正==