DataEntry.vue 972 B

123456789101112131415161718192021222324252627282930313233343536373839404142
  1. <script setup lang="ts">
  2. import { reactive } from 'vue'
  3. import { VxeGridProps } from 'vxe-table'
  4. //表格
  5. const tableColumns = [
  6. { type: 'seq', title: 'ID', width: 50 },
  7. { field: 'Name', title: '平台名称' },
  8. { field: 'Country', title: '国家' },
  9. { field: 'Brand', title: '品牌' },
  10. { field: 'Sales', title: '销售额' },
  11. { field: 'TotalAdSales', title: '广告销售额' },
  12. { field: 'AdSpend', title: '广告花费' },
  13. ]
  14. const gridOptions = reactive<VxeGridProps<RowVO>>({
  15. border: true,
  16. height: 300,
  17. align: null,
  18. columnConfig: {
  19. resizable: true,
  20. },
  21. columns: tableColumns,
  22. toolbarConfig: {
  23. slots: {
  24. buttons: 'toolbar_buttons',
  25. },
  26. },
  27. data: [{ Name: 10001, Country: 'Test1', Brand: 'T1', Sales: 'Develop', TotalAdSales: 11, AdSpend: 28 }],
  28. })
  29. </script>
  30. <template>
  31. <div>
  32. <vxe-grid v-bind="gridOptions">
  33. <template #toolbar_buttons></template>
  34. </vxe-grid>
  35. </div>
  36. </template>
  37. <style scoped></style>