ArrayExport.vue 924 B

123456789101112131415161718192021222324252627282930313233343536
  1. <template>
  2. <div class="m-4">
  3. <BasicTable title="基础表格" :columns="columns" :dataSource="data">
  4. <template #toolbar>
  5. <a-button @click="aoaToExcel">导出</a-button>
  6. </template>
  7. </BasicTable>
  8. </div>
  9. </template>
  10. <script lang="ts">
  11. import { defineComponent } from 'vue';
  12. import { BasicTable } from '/@/components/Table';
  13. import { aoaToSheetXlsx, ExportExcelModel } from '/@/components/Excel';
  14. import { arrHeader, arrData, columns, data } from './data';
  15. export default defineComponent({
  16. components: { BasicTable, ExportExcelModel },
  17. setup() {
  18. function aoaToExcel() {
  19. // 保证data顺序与header一致
  20. aoaToSheetXlsx({
  21. data: arrData,
  22. header: arrHeader,
  23. filename: '二维数组方式导出excel.xlsx',
  24. });
  25. }
  26. return {
  27. aoaToExcel,
  28. columns,
  29. data,
  30. };
  31. },
  32. });
  33. </script>