el‐tabs - daniel-qa/Vue GitHub Wiki

el-tabs

  • 區塊類的元素（如 < div>、< section>、< el-card>、< el-container> 等）都可以使用 v-loading，這是 Element Plus 提供的一種指令式加載效果。

  • 要切換 el-tab-pane 頁面，設定 el-tabs 綁定的 v-model 的 ref 變數為 el-tabl-pane 的 name 名稱

<template>
    <el-tabs v-model="activeTab">
        <el-tab-pane label="用户管理" name="user">用户管理内容</el-tab-pane>
        <el-tab-pane label="系统设置" name="settings">系统设置内容</el-tab-pane>
        <el-tab-pane label="访问日志" name="logs">访问日志内容</el-tab-pane>
    </el-tabs>

    <div style="margin-top: 20px;">
        <p>当前选中的标签页：{{ activeTab }}</p>
        <p v-if="activeTab === 'user'">你正在查看【用户管理】</p>
        <p v-else-if="activeTab === 'settings'">你正在查看【系统设置】</p>
        <p v-else>你正在查看【访问日志】</p>
    </div>
</template>

<script setup>
    import { ref } from 'vue';

    const activeTab = ref('user'); // 设定默认选中的 tab
</script>
⚠️ **GitHub.com Fallback** ⚠️