1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
| <template>
| <div
| class="grid-layout-wrapper"
| :style="{
| 'grid-template-columns': `repeat(${chunkSize}, 1fr)`,
| 'grid-column-gap': `${gutter}px`,
| 'grid-row-gap': `${rowGap ? gutter : rowGutter}px`,
| }"
| >
| <div class="grid-layout-item" v-for="(item, index) in tableData" :key="index">
| <slot name="item" :item="item" :index="index" />
| </div>
| </div>
| </template>
|
| <script setup lang="ts" generic="T = any">
| defineOptions({
| name: 'GridView',
| });
|
| type Props = {
| chunkSize?: number;
| gutter: number;
| tableData: T[];
| rowGap?: boolean;
| rowGutter?: number;
| };
|
| const props = withDefaults(defineProps<Props>(), {
| gutter: 0,
| rowGutter: 0,
| chunkSize: 0,
| rowGap: false,
| });
| </script>
|
| <style lang="scss" scoped>
| @use '@/style/common.scss' as *;
|
| .grid-layout-wrapper {
| display: grid;
|
| .grid-layout-item {
| min-width: 0;
| }
| }
| </style>
|
|
