table.vue 1012 B

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152
  1. <template>
  2. <CtTable
  3. class="mt-3"
  4. :items="items"
  5. :headers="headers"
  6. :loading="false"
  7. :elevation="0"
  8. :isTools="false"
  9. :showPage="true"
  10. :total="total"
  11. :page-info="query"
  12. itemKey="id"
  13. height="60vh"
  14. @pageHandleChange="handlePageChange"
  15. >
  16. </CtTable>
  17. </template>
  18. <script setup>
  19. defineOptions({ name: 'myRegistration-integralTable'})
  20. import { ref } from 'vue'
  21. defineProps({
  22. tab: String,
  23. items: Array
  24. })
  25. const total = ref(0)
  26. const query = ref({
  27. pageNo: 1,
  28. pageSize: 10
  29. })
  30. const headers = [
  31. { title: '兑换物品', key: '兑换物品' },
  32. { title: '兑换时间', key: '兑换时间' },
  33. { title: '消耗积分', key: '消耗积分' },
  34. ]
  35. const handlePageChange = (e) => {
  36. query.value.pageNo = e.pageNo
  37. }
  38. </script>
  39. <style scoped lang="scss">
  40. :deep(.v-table > .v-table__wrapper > table > thead) {
  41. background-color: #f7f8fa !important;
  42. }
  43. :deep(.v-selection-control__input) {
  44. // color: var(--v-primary-base) !important;
  45. color: #767778;
  46. }
  47. </style>