<template>
  <div>
    <div style="width: 800px;">
      <el-tabs v-model="activeTab" @tab-click="handleTabClick">
        <el-tab-pane v-for="(item, index) in tabs" :label="item.label" :key="index">
          {{ item.content }}
        </el-tab-pane>
      </el-tabs>
    </div>
    <button @click="nextTab">下一个</button>
  </div>
</template>
<script>
 export default {
  data() {
    return {
      activeTab: 0,
      tabs: [
        { label: '标签页1', content: '内容1' },
        { label: '标签页2', content: '内容2' },
        { label: '标签页3', content: '内容3' }
      ]
    };
  },
  methods: {
    handleTabClick(tab) {
      this.activeTab = tab.index;
    },
    nextTab() {
      if (this.activeTab === this.tabs.length - 1) {
        this.activeTab = 0;
      } else {
        this.activeTab += 1;
      }
    }
  }
};
</script>
Element UI el-tabs循环实现 - 如何在el-tabs中实现循环切换标签页

原文地址: https://www.cveoy.top/t/topic/pTLe 著作权归作者所有。请勿转载和采集!

免费AI点我,无需注册和登录