fix Load

src/components/SkeletonTable.vue

@@ -0,0 +1,120 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+
+/** importType*/
+import type { QTableProps } from 'quasar'
+
+const columns = defineModel<QTableProps['columns']>('columns', {
+  required: true,
+})
+
+const rows = ref<Array<{ id: string; name: string }>>([
+  {
+    id: '',
+    name: '',
+  },
+])
+
+/** ตัวอย่างการใช้งาน */
+/// <SkeletonTable v-if="isLoading" :columns="columns" />
+</script>
+
+<template>
+  <q-table
+    flat
+    class="custom-table2"
+    bordered
+    :columns="columns"
+    :rows="rows"
+    row-key="id"
+    hide-pagination
+    :grid="$q.screen.gt.xs ? false : true"
+  >
+    <template v-slot:header="props">
+      <q-tr :props="props">
+        <q-th v-for="col in props.cols" :key="col.name" :props="props">
+          <span class="text-weight-medium">{{ col.label }}</span>
+        </q-th>
+        <q-th auto-width> </q-th>
+      </q-tr>
+    </template>
+
+    <template v-slot:body="props">
+      <q-tr :props="props" class="cursor-pointer">
+        <q-td v-for="col in props.cols" :key="col.name" :props="props">
+          <div>
+            <q-skeleton type="text" width="80px" />
+          </div>
+        </q-td>
+      </q-tr>
+    </template>
+
+    <template v-slot:item="props">
+      <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3">
+        <q-card bordered flat>
+          <q-list dense>
+            <q-item v-for="col in props.cols" :key="col.name">
+              <q-item-section>
+                <q-item-label caption>{{ col.label }}</q-item-label>
+              </q-item-section>
+
+              <q-item-section>
+                <q-item-label class="text-dark text-weight-medium">
+                  <q-skeleton type="text" />
+                </q-item-label>
+              </q-item-section>
+            </q-item>
+          </q-list>
+        </q-card>
+      </div>
+    </template>
+  </q-table>
+</template>
+
+<style scoped lang="scss">
+.custom-table2 {
+  .q-table tr:nth-child(odd) td {
+    background: white;
+  }
+
+  .q-table tr:nth-child(even) td {
+    background: #f8f8f8;
+  }
+
+  .q-table thead tr {
+    background: #ecebeb;
+  }
+
+  .q-table thead tr th {
+    position: sticky;
+  }
+
+  .q-table td:nth-of-type(2) {
+    z-index: 3 !important;
+  }
+
+  .q-table th:nth-of-type(2),
+  .q-table td:nth-of-type(2) {
+    position: sticky;
+    left: 0;
+    z-index: 1;
+  }
+
+  /* this will be the loading indicator */
+  .q-table thead tr:last-child th {
+    /* height of all previous header rows */
+    top: 48px;
+  }
+
+  .q-table thead tr:first-child th {
+    top: 0;
+  }
+  .text-caption {
+    text-align: left;
+  }
+}
+.q-card-section-last {
+  display: flex;
+  justify-content: flex-end;
+}
+</style>