skt-vuetify-templates/src/components/sections/SectionDataTable.vue

<script setup lang="ts">
import { mdiDelete, mdiEye, mdiPencil } from '@mdi/js'
import type { StudentRecord } from '@/models/student'

defineProps<{
  currentPage: number
  gradeLabel: (grade: number) => string
  headers: any[]
  items: StudentRecord[]
  itemsPerPage: number
  pageCount: number
  pageSummary: string
  rowProps: (data: { item: StudentRecord }) => Record<string, string>
  statusColor: (status: string) => string
}>()

const emit = defineEmits<{
  (e: 'update:currentPage', page: number): void
  (e: 'view', record: StudentRecord): void
  (e: 'edit', record: StudentRecord): void
  (e: 'delete', record: StudentRecord): void
}>()
</script>

<template>
  <v-data-table
    class="student-table"
    density="compact"
    fixed-header
    :headers="headers"
    height="100%"
    hide-default-footer
    :items="items"
    :items-per-page="itemsPerPage"
    :page="currentPage"
    :row-props="rowProps"
    @update:page="emit('update:currentPage', $event)"
  >
    <template #[`item.grade`]="{ item }">
      {{ gradeLabel(item.grade) }}
    </template>
    <template #[`item.status`]="{ item }">
      <v-chip :color="statusColor(item.status)" size="small" variant="tonal">
        {{ item.status }}
      </v-chip>
    </template>
    <template #[`item.actions`]="{ item }">
      <div class="d-flex ga-2">
        <v-btn
          color="info"
          :prepend-icon="mdiEye"
          size="small"
          variant="text"
          @click="emit('view', item)"
        >
          檢視
        </v-btn>
        <v-btn
          color="primary"
          :prepend-icon="mdiPencil"
          size="small"
          variant="text"
          @click="emit('edit', item)"
        >
          修改
        </v-btn>
        <v-btn
          color="error"
          :prepend-icon="mdiDelete"
          size="small"
          variant="text"
          @click="emit('delete', item)"
        >
          刪除
        </v-btn>
      </div>
    </template>
    <template #bottom>
      <div class="d-flex align-center justify-space-between px-4 py-3">
        <div class="text-body-2 text-medium-emphasis">
          {{ pageSummary }}
        </div>
        <div class="d-flex align-center ga-2">
          <v-btn
            :disabled="currentPage <= 1"
            size="small"
            variant="text"
            @click="emit('update:currentPage', 1)"
          >
            第一頁
          </v-btn>
          <v-btn
            :disabled="currentPage <= 1"
            size="small"
            variant="text"
            @click="emit('update:currentPage', currentPage - 1)"
          >
            上一頁
          </v-btn>
          <span class="text-body-2">{{ currentPage }} / {{ pageCount }}</span>
          <v-btn
            :disabled="currentPage >= pageCount"
            size="small"
            variant="text"
            @click="emit('update:currentPage', currentPage + 1)"
          >
            下一頁
          </v-btn>
          <v-btn
            :disabled="currentPage >= pageCount"
            size="small"
            variant="text"
            @click="emit('update:currentPage', pageCount)"
          >
            最後頁
          </v-btn>
        </div>
      </div>
    </template>
  </v-data-table>
</template>

<style scoped>
.student-table {
  overflow: auto;
}

.student-table :deep(table) {
  min-width: 1400px;
}

.student-table :deep(th),
.student-table :deep(td) {
  white-space: nowrap;
}

.student-table :deep(.v-data-table-column--fixed),
.student-table :deep(.v-data-table-column--fixed-end) {
  background: rgb(var(--v-theme-surface));
}

.student-table :deep(.v-data-table-column--fixed-last-start)::after {
  content: '';
  position: absolute;
  top: 0;
  right: -5px;
  bottom: 0;
  width: 5px;
  box-shadow: inset 10px 0 8px -8px rgba(0, 0, 0, 0.15);
}

.student-table :deep(.v-data-table-footer) {
  padding: 4px 0 0;
}

tbody tr.is-highlighted {
  animation: row-highlight 1.6s ease-out;
}

@keyframes row-highlight {
  0% {
    background-color: rgba(var(--v-theme-primary), 0.18);
  }

  100% {
    background-color: transparent;
  }
}
</style>