undefinedfix
Sign in

element - UI tabs tab refresh page how to make it default to the second page

celyes edited in Fri, 15 Jul 2022

There is a delete function, delete will refresh the page, as long as the refresh, tab position will default to the first, there is no way to make it refresh position unchanged

4 Replies
tubwreck
commented on Fri, 15 Jul 2022

Official demo

<template>
  <el-tabs v-model="activeName" @tab-click="handleClick">
    <el-tab-pane label="用户管理" name="first">用户管理</el-tab-pane>
    <el-tab-pane label="配置管理" name="second">配置管理</el-tab-pane>
    <el-tab-pane label="角色管理" name="third">角色管理</el-tab-pane>
    <el-tab-pane label="定时任务补偿" name="fourth">定时任务补偿</el-tab-pane>
  </el-tabs>
</template>
<script>
  export default {
    data() {
      return {
        activeName: 'second'
      };
    },
    methods: {
      handleClick(tab, event) {
        console.log(tab, event);
      }
    }
  };
</script>

You can record the name of the current tab when you click, read the data and modify the data when the page is refreshed . Activename.

szatti1489
commented on Fri, 15 Jul 2022

This means that the currently deleted option will be displayed on the corresponding tab after refreshing the page? We suggest the following solutions to help you: 1. Use the browser cache to record. 2. When deleting the data overload page, you need to display it to the corresponding tab position and bind it to the address bar of the current page as a parameter, so you need to obtain the current parameter value of URL when creating the page to display the corresponding tab3.vue data by default, update the bidirectional binding, and delete the data refresh page In fact, it's not very friendly. It's recommended to refresh the deleted data locally, so there won't be the problem of refreshing the tab

Amer
commented on Fri, 15 Jul 2022
create(){
    this.activeName = 'second'
}
ssoma
commented on Fri, 15 Jul 2022

Use cache to record