menduner/src/views/integral/pointsManagement/components/integralTable.vue

<template>
  <v-data-table
    class="mt-3"
    :items="items"
    :headers="tab === 0 ? integralHeaders : balanceHeaders"
    hover
    item-value="id"
  >
    <template #bottom></template>
  </v-data-table>
</template>

<script setup>
defineOptions({ name: 'myRegistration-integralTable'})
import { timesTampChange } from '@/utils/date'

defineProps({
  tab: Number,
  items: Array
})

const integralHeaders = [
  { title: '标题', key: 'title', sortable: false },
  { title: '描述', key: 'description', sortable: false },
  { title: '积分点', key: 'point', sortable: false },
  { title: '剩余点数', key: 'totalPoint', sortable: false },
  { title: '发生时间', key: 'createTime', value: item =>  timesTampChange(item.createTime), sortable: false },
]
const balanceHeaders = [
  { title: '标题', key: 'title', sortable: false },
  { title: '描述', key: 'description', sortable: false },
  { title: '金额', key: 'balance', sortable: false},
  { title: '账户余额', key: 'totalBalance', sortable: false },
  { title: '发生时间', key: 'createTime', value: item =>  timesTampChange(item.createTime), sortable: false },
]
</script>

<style scoped lang="scss">
:deep(.v-table > .v-table__wrapper > table > thead) {
  background-color: #f7f8fa !important;
}
:deep(.v-selection-control__input) {
  // color: var(--v-primary-base) !important;
  color: #767778;
}
</style>