responsive ระบบการลา,ระบบลาออก

src/components/TableD.vue

@@ -10,6 +10,7 @@
     dense
     :pagination-label="paginationLabel"
     v-model:pagination="pagination"
+    :grid="!$q.screen.gt.xs"
   >
     <template v-slot:pagination="scope">
       ทั้งหมด {{ attrs.rows.length }} รายการ
@@ -28,6 +29,28 @@
     <template v-for="(_, slot) in slots" v-slot:[slot]="scope">
       <slot :name="slot" v-bind="scope || {}" />
     </template>
+    <!-- <template #item="props">
+      <div class="q-pa-xs col-xs-12 col-sm-6 col-md-4 col-lg-3">
+        <q-card bordered flat>
+          <q-list>
+            <q-item
+              v-for="col in props.cols.filter((col:any) => col.name !== 'desc')"
+              :key="col.name"
+            >
+              <q-item-section>
+                <q-item-label caption>{{ col.label }}</q-item-label>
+
+                <q-item-label v-if="col.name === 'no'">
+                  {{ props.rowIndex + 1 }}
+                </q-item-label>
+
+                <q-item-label v-else>{{ col.value }}</q-item-label>
+              </q-item-section>
+            </q-item>
+          </q-list>
+        </q-card>
+      </div>
+    </template> -->
   </q-table>
 </template>
 <script setup lang="ts">
@@ -42,7 +65,6 @@ const props = defineProps({
   },
 });
 
-
 const pagination = ref({
   sortBy: "desc",
   descending: false,