SkeketonTable

src/components/SkeletonTable.vue

@@ -0,0 +1,36 @@
+<script setup lang="ts">
+import { computed } from "vue";
+
+/** importType*/
+import type { QTableProps } from "quasar";
+
+const columns = defineModel<QTableProps["columns"]>("columns", {
+  required: true,
+});
+
+/** จำนวนคอลัมน์ */
+const skeletonColumns = computed(() => columns.value?.length || 5);
+
+/** ตัวอย่างการใช้งาน */
+/// <SkeletonTable v-if="isLoading" :columns="columns" />
+</script>
+
+<template>
+  <q-markup-table flat bordered>
+    <thead>
+      <tr>
+        <th v-for="(n, idx) in skeletonColumns" :key="idx" style="width: 150px">
+          <q-skeleton type="text" />
+        </th>
+      </tr>
+    </thead>
+
+    <tbody>
+      <tr v-for="n in 5" :key="n" :class="n % 2 === 0 ? 'bg-grey-2' : ''">
+        <td v-for="(col, idx) in skeletonColumns" :key="idx">
+          <q-skeleton type="text" width="80px" />
+        </td>
+      </tr>
+    </tbody>
+  </q-markup-table>
+</template>