elementui 的tab(el-tabs)标签刷新时保持当前状态

615 阅读1分钟

 html:

      <el-tabs v-model="tabName" type="card" @tab-click="change">
        <el-tab-pane label="用户操作安全" name="user">
            用户操作安全
        </el-tab-pane>
        <el-tab-pane label="网络数据安全" name="network">
             网络数据安全
        </el-tab-pane>
      </el-tabs>

js:

  data() {
    return {
      tabName: 'user',
    };
  },
  mounted() {
    const tab = this.$route.query.tab;
    if (tab) {
      this.tabName = tab;
    }
  },
  methods: {
    change(tab) {
      if (this.$route.query.tab !== tab.name) {
        this.$router.push(`${this.$route.path}?tab=${tab.name}`);
      }
    },
  }