style: lint格式化文件
This commit is contained in:
@ -1,37 +1,37 @@
|
||||
<template>
|
||||
<PageWrapper title="导出示例" content="根据数组格式的数据进行导出">
|
||||
<BasicTable title="基础表格" :columns="columns" :dataSource="data">
|
||||
<template #toolbar>
|
||||
<a-button @click="aoaToExcel"> 导出 </a-button>
|
||||
</template>
|
||||
</BasicTable>
|
||||
</PageWrapper>
|
||||
<PageWrapper title="导出示例" content="根据数组格式的数据进行导出">
|
||||
<BasicTable title="基础表格" :columns="columns" :dataSource="data">
|
||||
<template #toolbar>
|
||||
<a-button @click="aoaToExcel"> 导出 </a-button>
|
||||
</template>
|
||||
</BasicTable>
|
||||
</PageWrapper>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { defineComponent } from 'vue';
|
||||
import { BasicTable } from '/@/components/Table';
|
||||
import { aoaToSheetXlsx } from '/@/components/Excel';
|
||||
import { arrHeader, arrData, columns, data } from './data';
|
||||
import { PageWrapper } from '/@/components/Page';
|
||||
import { defineComponent } from 'vue';
|
||||
import { BasicTable } from '/@/components/Table';
|
||||
import { aoaToSheetXlsx } from '/@/components/Excel';
|
||||
import { arrHeader, arrData, columns, data } from './data';
|
||||
import { PageWrapper } from '/@/components/Page';
|
||||
|
||||
export default defineComponent({
|
||||
components: { BasicTable, PageWrapper },
|
||||
setup() {
|
||||
function aoaToExcel() {
|
||||
// 保证data顺序与header一致
|
||||
aoaToSheetXlsx({
|
||||
data: arrData,
|
||||
header: arrHeader,
|
||||
filename: '二维数组方式导出excel.xlsx',
|
||||
});
|
||||
}
|
||||
export default defineComponent({
|
||||
components: { BasicTable, PageWrapper },
|
||||
setup() {
|
||||
function aoaToExcel() {
|
||||
// 保证data顺序与header一致
|
||||
aoaToSheetXlsx({
|
||||
data: arrData,
|
||||
header: arrHeader,
|
||||
filename: '二维数组方式导出excel.xlsx'
|
||||
});
|
||||
}
|
||||
|
||||
return {
|
||||
aoaToExcel,
|
||||
columns,
|
||||
data,
|
||||
};
|
||||
},
|
||||
});
|
||||
return {
|
||||
aoaToExcel,
|
||||
columns,
|
||||
data
|
||||
};
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
@ -1,44 +1,44 @@
|
||||
<template>
|
||||
<PageWrapper title="导出示例" content="可以选择导出格式">
|
||||
<BasicTable title="基础表格" :columns="columns" :dataSource="data">
|
||||
<template #toolbar>
|
||||
<a-button @click="openModal"> 导出 </a-button>
|
||||
</template>
|
||||
</BasicTable>
|
||||
<ExpExcelModal @register="register" @success="defaultHeader" />
|
||||
</PageWrapper>
|
||||
<PageWrapper title="导出示例" content="可以选择导出格式">
|
||||
<BasicTable title="基础表格" :columns="columns" :dataSource="data">
|
||||
<template #toolbar>
|
||||
<a-button @click="openModal"> 导出 </a-button>
|
||||
</template>
|
||||
</BasicTable>
|
||||
<ExpExcelModal @register="register" @success="defaultHeader" />
|
||||
</PageWrapper>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { defineComponent } from 'vue';
|
||||
import { BasicTable } from '/@/components/Table';
|
||||
import { jsonToSheetXlsx, ExpExcelModal, ExportModalResult } from '/@/components/Excel';
|
||||
import { columns, data } from './data';
|
||||
import { useModal } from '/@/components/Modal';
|
||||
import { PageWrapper } from '/@/components/Page';
|
||||
import { defineComponent } from 'vue';
|
||||
import { BasicTable } from '/@/components/Table';
|
||||
import { jsonToSheetXlsx, ExpExcelModal, ExportModalResult } from '/@/components/Excel';
|
||||
import { columns, data } from './data';
|
||||
import { useModal } from '/@/components/Modal';
|
||||
import { PageWrapper } from '/@/components/Page';
|
||||
|
||||
export default defineComponent({
|
||||
components: { BasicTable, ExpExcelModal, PageWrapper },
|
||||
setup() {
|
||||
function defaultHeader({ filename, bookType }: ExportModalResult) {
|
||||
// 默认Object.keys(data[0])作为header
|
||||
jsonToSheetXlsx({
|
||||
data,
|
||||
filename,
|
||||
write2excelOpts: {
|
||||
bookType,
|
||||
},
|
||||
});
|
||||
}
|
||||
const [register, { openModal }] = useModal();
|
||||
export default defineComponent({
|
||||
components: { BasicTable, ExpExcelModal, PageWrapper },
|
||||
setup() {
|
||||
function defaultHeader({ filename, bookType }: ExportModalResult) {
|
||||
// 默认Object.keys(data[0])作为header
|
||||
jsonToSheetXlsx({
|
||||
data,
|
||||
filename,
|
||||
write2excelOpts: {
|
||||
bookType
|
||||
}
|
||||
});
|
||||
}
|
||||
const [register, { openModal }] = useModal();
|
||||
|
||||
return {
|
||||
defaultHeader,
|
||||
columns,
|
||||
data,
|
||||
register,
|
||||
openModal,
|
||||
};
|
||||
},
|
||||
});
|
||||
return {
|
||||
defaultHeader,
|
||||
columns,
|
||||
data,
|
||||
register,
|
||||
openModal
|
||||
};
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
@ -1,57 +1,51 @@
|
||||
<template>
|
||||
<PageWrapper title="excel数据导入示例">
|
||||
<ImpExcel @success="loadDataSuccess" dateFormat="YYYY-MM-DD">
|
||||
<a-button class="m-3"> 导入Excel </a-button>
|
||||
</ImpExcel>
|
||||
<BasicTable
|
||||
v-for="(table, index) in tableListRef"
|
||||
:key="index"
|
||||
:title="table.title"
|
||||
:columns="table.columns"
|
||||
:dataSource="table.dataSource"
|
||||
/>
|
||||
</PageWrapper>
|
||||
<PageWrapper title="excel数据导入示例">
|
||||
<ImpExcel @success="loadDataSuccess" dateFormat="YYYY-MM-DD">
|
||||
<a-button class="m-3"> 导入Excel </a-button>
|
||||
</ImpExcel>
|
||||
<BasicTable v-for="(table, index) in tableListRef" :key="index" :title="table.title" :columns="table.columns" :dataSource="table.dataSource" />
|
||||
</PageWrapper>
|
||||
</template>
|
||||
<script lang="ts">
|
||||
import { defineComponent, ref } from 'vue';
|
||||
import { defineComponent, ref } from 'vue';
|
||||
|
||||
import { ImpExcel, ExcelData } from '/@/components/Excel';
|
||||
import { BasicTable, BasicColumn } from '/@/components/Table';
|
||||
import { PageWrapper } from '/@/components/Page';
|
||||
import { ImpExcel, ExcelData } from '/@/components/Excel';
|
||||
import { BasicTable, BasicColumn } from '/@/components/Table';
|
||||
import { PageWrapper } from '/@/components/Page';
|
||||
|
||||
export default defineComponent({
|
||||
components: { BasicTable, ImpExcel, PageWrapper },
|
||||
export default defineComponent({
|
||||
components: { BasicTable, ImpExcel, PageWrapper },
|
||||
|
||||
setup() {
|
||||
const tableListRef = ref<
|
||||
{
|
||||
title: string;
|
||||
columns?: any[];
|
||||
dataSource?: any[];
|
||||
}[]
|
||||
>([]);
|
||||
setup() {
|
||||
const tableListRef = ref<
|
||||
{
|
||||
title: string;
|
||||
columns?: any[];
|
||||
dataSource?: any[];
|
||||
}[]
|
||||
>([]);
|
||||
|
||||
function loadDataSuccess(excelDataList: ExcelData[]) {
|
||||
tableListRef.value = [];
|
||||
console.log(excelDataList);
|
||||
for (const excelData of excelDataList) {
|
||||
const {
|
||||
header,
|
||||
results,
|
||||
meta: { sheetName },
|
||||
} = excelData;
|
||||
const columns: BasicColumn[] = [];
|
||||
for (const title of header) {
|
||||
columns.push({ title, dataIndex: title });
|
||||
}
|
||||
tableListRef.value.push({ title: sheetName, dataSource: results, columns });
|
||||
function loadDataSuccess(excelDataList: ExcelData[]) {
|
||||
tableListRef.value = [];
|
||||
console.log(excelDataList);
|
||||
for (const excelData of excelDataList) {
|
||||
const {
|
||||
header,
|
||||
results,
|
||||
meta: { sheetName }
|
||||
} = excelData;
|
||||
const columns: BasicColumn[] = [];
|
||||
for (const title of header) {
|
||||
columns.push({ title, dataIndex: title });
|
||||
}
|
||||
tableListRef.value.push({ title: sheetName, dataSource: results, columns });
|
||||
}
|
||||
}
|
||||
|
||||
return {
|
||||
loadDataSuccess,
|
||||
tableListRef
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
return {
|
||||
loadDataSuccess,
|
||||
tableListRef,
|
||||
};
|
||||
},
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
||||
@ -1,58 +1,58 @@
|
||||
<template>
|
||||
<PageWrapper title="导出示例" content="根据JSON格式的数据进行导出">
|
||||
<BasicTable title="基础表格" :columns="columns" :dataSource="data">
|
||||
<template #toolbar>
|
||||
<a-button @click="defaultHeader"> 导出：默认头部 </a-button>
|
||||
<a-button @click="customHeader"> 导出：自定义头部 </a-button>
|
||||
</template>
|
||||
</BasicTable>
|
||||
</PageWrapper>
|
||||
<PageWrapper title="导出示例" content="根据JSON格式的数据进行导出">
|
||||
<BasicTable title="基础表格" :columns="columns" :dataSource="data">
|
||||
<template #toolbar>
|
||||
<a-button @click="defaultHeader"> 导出：默认头部 </a-button>
|
||||
<a-button @click="customHeader"> 导出：自定义头部 </a-button>
|
||||
</template>
|
||||
</BasicTable>
|
||||
</PageWrapper>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { defineComponent } from 'vue';
|
||||
import { BasicTable } from '/@/components/Table';
|
||||
import { jsonToSheetXlsx } from '/@/components/Excel';
|
||||
import { columns, data } from './data';
|
||||
import { PageWrapper } from '/@/components/Page';
|
||||
import { defineComponent } from 'vue';
|
||||
import { BasicTable } from '/@/components/Table';
|
||||
import { jsonToSheetXlsx } from '/@/components/Excel';
|
||||
import { columns, data } from './data';
|
||||
import { PageWrapper } from '/@/components/Page';
|
||||
|
||||
export default defineComponent({
|
||||
components: { BasicTable, PageWrapper },
|
||||
setup() {
|
||||
function defaultHeader() {
|
||||
// 默认Object.keys(data[0])作为header
|
||||
jsonToSheetXlsx({
|
||||
data,
|
||||
filename: '使用key作为默认头部.xlsx',
|
||||
});
|
||||
}
|
||||
export default defineComponent({
|
||||
components: { BasicTable, PageWrapper },
|
||||
setup() {
|
||||
function defaultHeader() {
|
||||
// 默认Object.keys(data[0])作为header
|
||||
jsonToSheetXlsx({
|
||||
data,
|
||||
filename: '使用key作为默认头部.xlsx'
|
||||
});
|
||||
}
|
||||
|
||||
function customHeader() {
|
||||
jsonToSheetXlsx({
|
||||
data,
|
||||
header: {
|
||||
id: 'ID',
|
||||
name: '姓名',
|
||||
age: '年龄',
|
||||
no: '编号',
|
||||
address: '地址',
|
||||
beginTime: '开始时间',
|
||||
endTime: '结束时间',
|
||||
},
|
||||
filename: '自定义头部.xlsx',
|
||||
json2sheetOpts: {
|
||||
// 指定顺序
|
||||
header: ['name', 'id'],
|
||||
},
|
||||
});
|
||||
}
|
||||
function customHeader() {
|
||||
jsonToSheetXlsx({
|
||||
data,
|
||||
header: {
|
||||
id: 'ID',
|
||||
name: '姓名',
|
||||
age: '年龄',
|
||||
no: '编号',
|
||||
address: '地址',
|
||||
beginTime: '开始时间',
|
||||
endTime: '结束时间'
|
||||
},
|
||||
filename: '自定义头部.xlsx',
|
||||
json2sheetOpts: {
|
||||
// 指定顺序
|
||||
header: ['name', 'id']
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
return {
|
||||
defaultHeader,
|
||||
customHeader,
|
||||
columns,
|
||||
data,
|
||||
};
|
||||
},
|
||||
});
|
||||
return {
|
||||
defaultHeader,
|
||||
customHeader,
|
||||
columns,
|
||||
data
|
||||
};
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
Reference in New Issue
Block a user