64 lines
1.5 KiB
Vue
64 lines
1.5 KiB
Vue
<script setup lang="ts">
|
|
import { QTableSlots, QTableProps } from 'quasar';
|
|
|
|
const prop = withDefaults(
|
|
defineProps<{
|
|
row: QTableProps['rows'];
|
|
columns: QTableProps['columns'];
|
|
}>(),
|
|
{
|
|
row: () => [],
|
|
columns: () => [],
|
|
},
|
|
);
|
|
</script>
|
|
<template>
|
|
<q-table
|
|
:rows-per-page-options="[5, 0]"
|
|
:rows="
|
|
row.map((item, i) => ({
|
|
...item,
|
|
_index: i,
|
|
}))
|
|
"
|
|
:columns
|
|
bordered
|
|
flat
|
|
selection="multiple"
|
|
class="full-width"
|
|
>
|
|
<template v-slot:header="props">
|
|
<q-tr
|
|
style="background-color: hsla(var(--info-bg) / 0.07)"
|
|
:props="props"
|
|
>
|
|
<q-th v-for="col in columns" :key="col.name" :props="props">
|
|
{{ $t(col.label) }}
|
|
</q-th>
|
|
</q-tr>
|
|
</template>
|
|
|
|
<template
|
|
v-slot:body="props: {
|
|
row: any & { _index: number };
|
|
} & Omit<Parameters<QTableSlots['body']>[0], 'row'>"
|
|
>
|
|
<q-tr :class="{ dark: $q.dark.isActive }" class="text-center">
|
|
<q-td v-for="col in columns" :align="col.align">
|
|
<!-- NOTE: custom column will starts with # -->
|
|
<template v-if="!col.name.startsWith('#')">
|
|
{{
|
|
typeof col.field === 'string'
|
|
? props.row[col.field]
|
|
: col.field(props.row)
|
|
}}
|
|
</template>
|
|
|
|
<template v-else>
|
|
<slot :name="col.name.replace(/^#/, '')" :item="props" />
|
|
</template>
|
|
</q-td>
|
|
</q-tr>
|
|
</template>
|
|
</q-table>
|
|
</template>
|