<script setup lang="ts">
import { reactive } from 'vue'
import { VxeGridProps } from 'vxe-table'

//表格
const tableColumns = [
  { type: 'seq', title: 'ID', width: 50 },
  { field: 'Name', title: '平台名称' },
  { field: 'Country', title: '国家' },
  { field: 'Brand', title: '品牌' },
  { field: 'Sales', title: '销售额' },
  { field: 'TotalAdSales', title: '广告销售额' },
  { field: 'AdSpend', title: '广告花费' },
]

const gridOptions = reactive<VxeGridProps<RowVO>>({
  border: true,
  height: 300,
  align: null,
  columnConfig: {
    resizable: true,
  },

  columns: tableColumns,
  toolbarConfig: {
    slots: {
      buttons: 'toolbar_buttons',
    },
  },
  data: [{ Name: 10001, Country: 'Test1', Brand: 'T1', Sales: 'Develop', TotalAdSales: 11, AdSpend: 28 }],
})
</script>

<template>
  <div>
    <vxe-grid v-bind="gridOptions">
      <template #toolbar_buttons></template>
    </vxe-grid>
  </div>
</template>

<style scoped></style>
