|
|
@@ -7,9 +7,9 @@ Template de base d'un tableau interactif
|
|
|
<template>
|
|
|
<v-col cols="12" sm="12">
|
|
|
<v-data-table :headers="headersWithItem" :items="items" class="elevation-1">
|
|
|
- <template v-for="(header, index) in headersWithItem" :key="index" #[header.item]="props">
|
|
|
- <slot :name="header.item" v-bind="props">
|
|
|
- {{ props.item[header.value] }}
|
|
|
+ <template v-for="(header, index) in headersWithItem" :key="index" #[header.item]="slotProps">
|
|
|
+ <slot :name="header.item" v-bind="slotProps">
|
|
|
+ {{ slotProps.item[header.value] }}
|
|
|
</slot>
|
|
|
</template>
|
|
|
</v-data-table>
|
|
|
@@ -17,13 +17,19 @@ Template de base d'un tableau interactif
|
|
|
</template>
|
|
|
|
|
|
<script setup lang="ts">
|
|
|
+interface TableHeader {
|
|
|
+ value: string;
|
|
|
+ item?: string;
|
|
|
+ [key: string]: unknown;
|
|
|
+}
|
|
|
+
|
|
|
const props = defineProps({
|
|
|
items: {
|
|
|
type: Array,
|
|
|
required: true,
|
|
|
},
|
|
|
headers: {
|
|
|
- type: Array,
|
|
|
+ type: Array as PropType<TableHeader[]>,
|
|
|
required: true,
|
|
|
},
|
|
|
})
|
|
|
@@ -31,7 +37,7 @@ const props = defineProps({
|
|
|
const { headers } = toRefs(props)
|
|
|
|
|
|
const headersWithItem = computed(() => {
|
|
|
- return headers.value.map((header: any) => {
|
|
|
+ return headers.value.map((header: TableHeader) => {
|
|
|
header.item = 'item.' + header.value
|
|
|
return header
|
|
|
})
|