ArrayExport.vue 1.0 KB

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