62 lines
1.6 KiB
Vue
62 lines
1.6 KiB
Vue
<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>
|
|
<d-table
|
|
flat
|
|
bordered
|
|
:columns="columns"
|
|
:rows="rows"
|
|
row-key="id"
|
|
hide-pagination
|
|
>
|
|
<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="q-mb-xs col-xs-12 col-sm-6 col-md-4 col-lg-3">
|
|
<q-card bordered flat>
|
|
<q-list dense class="q-mt-lg relative-position">
|
|
<q-item v-for="col in props.cols" :key="col.name">
|
|
<q-item-section>
|
|
<q-item-label class="text-grey-6 text-weight-medium">{{
|
|
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>
|
|
</d-table>
|
|
</template>
|