120 lines
2.6 KiB
Vue
120 lines
2.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>
|
|
<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>
|