<template>
<div class="order">
<el-dropdown class="export-btns">
<el-button type="success">数据导出</el-button>
<template #dropdown>
<el-dropdown-menu>
<el-dropdown-item @click="handleExport('current')"><el-icon class="el-icon--left">
<document />
</el-icon>导出当前页</el-dropdown-item>
<el-dropdown-item @click="handleExport('all')"><el-icon class="el-icon--left">
<document />
</el-icon>导出所有</el-dropdown-item>
</el-dropdown-menu>
</template>
</el-dropdown>
</div>
<el-table :data="data.tableDataView" highlight-current-row height="430" border stripe fit size="small"
style="width: 100%" @row-dblclick="handleTableRow">
<el-table-column prop="disabled" label="禁用" width="70" align="center" sortable />
<el-table-column prop="cls_id" label="类别" width="70" align="center" sortable />
<el-table-column prop="md_guihao" label="药房柜号" width="90" align="center" sortable />
<el-table-column prop="code_item_id" label="Id" width="80" align="center" sortable />
<el-table-column prop="name" label="名称" width="70" align="center" sortable />
<el-table-column prop="guige" label="规格" width="70" align="center" sortable />
</el-table>
</template>
<script setup lang="ts">
import { ref, reactive, onMounted, watch } from 'vue'
import bus from '@/bus'
import CsvExport from "@/utils/CsvExport";
const props = defineProps({
// 表格数据
mdStockItemTable: {
type: Array,
default: []
}
})
// 导出表格
const handleExport = (target: any) => {
const timestamp: any = (new Date()).valueOf();
const exportData = target === 'current' ? data.tableDataView : data.allTableData;
CsvExport(exportData, [
{
prop: 'disabled',
label: '禁用'
}, {
prop: 'cls_id',
label: '类别'
}, {
prop: 'md_guihao',
label: '药房柜号'
}, {
prop: 'code_item_id',
label: 'Id'
}, {
prop: 'name',
label: '名称'
}, {
prop: 'guige',
label: '规格'
},
], `ecom-export-users-${target === 'current' ? 'current' : 'all'}-${timestamp}`)
}
</script>
<style scoped lang="scss">
.order {
margin: 2px 0 25px 15px;
.export-btns {
margin: 0 12px;
}
}
</style>
js文件
const { Parser } = require("json2csv");
interface IColumn {
prop: string;
label?: string;
formatter?: (row: any, column: IColumn, cellValue: any) => any;
}
function GetRow(row: any, columns: IColumn[]): any {
let obj: any = {};
columns.forEach((col) => {
let val = row[col.prop];
if (col.formatter) {
val = col.formatter(row, col, val);
}
obj[col.prop] = val;
});
return obj;
}
export default function ExportCsv(
data: any[],
columns: IColumn[],
fileName: string = "file"
) {
const rows = data.map((t) => GetRow(t, columns));
const fields = columns.map((t) => {
return { value: t.prop, label: t.label };
});
try {
const json2csvParser = new Parser({ fields });
const result = json2csvParser.parse(rows);
const csvContent = "data:text/csv;charset=GBK,\uFEFF" + result;
const link = document.createElement("a");
link.href = encodeURI(csvContent);
link.download = `${fileName}.csv`;
document.body.appendChild(link); // Required for FF
link.click(); // This will download the data file named 'my_data.csv'.
document.body.removeChild(link); // Required for FF
} catch (err) {
// Errors are thrown for bad options, or if the data is empty and no fields are provided.
// Be sure to provide fields if it is possible that your data array will be empty.
console.error(err);
}
}