顯示許多ID資料 - daniel-qa/Vue GitHub Wiki

顯示許多ID資料

用 el-scrollbar 包住一堆 < el-tag>，以捲動方式展示 300 個教師 ID，整齊又不佔版面。

<template>
    <el-scrollbar height="200px">
        <div style="display: flex; flex-wrap: wrap; gap: 8px">
            <el-tag v-for="id in teacherIds"
                    :key="id"
                    size="small"
                    type="info">
                {{ id }}
            </el-tag>
        </div>
    </el-scrollbar>
</template>

<script setup>
    const teacherIds = Array.from({ length: 300 }, (_, i) => T${i + 1});
</script>

說明

<el-scrollbar height="200px">

元件：Element Plus 的自訂捲軸容器

height="200px"：設定容器高度為 200px，超過就自動出現滾動條

👉 不然 300 個 tag 會把畫面塞爆！

<div style="display: flex; flex-wrap: wrap; gap: 8px">

display: flex：讓裡面的 tag 橫向排列

flex-wrap: wrap：東西太多時自動換行

gap: 8px：每個 tag 間隔 8px，保持通風（美觀）

⚠️ **GitHub.com Fallback** ⚠️