<!--Tabs 標籤頁:分隔內容上有關聯但屬於不同類別的資料集合。
Tabs 元件提供了選項卡功能，預設選中第一個標籤頁，你也可以通過 value 屬性來指定當前選中的標籤頁。
只需要設定 type 屬性為 card 就可以使選項卡改變為標籤風格。-->
<el-tabs v-model="activeName" @tab-click="handleClick" type="card">
  <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>
 

<script>
  new Vue({
    el: '#app',
    data() {
      return {
        activeName: 'second'
      };
    },
    methods: {
      handleClick(tab, event) {
        console.log(tab, event);
      }
    }
  })
</script>

Tabs Attributes

Tabs Events

Tab-pane Attributes