准备工作
- npm 安装 vxe-table
- npm 安装 exceljs
- npm 安装 vxe-table-plugin-export-xlsx
import VXETable from 'vxe-table'
import VXETablePluginExportXLSX from 'vxe-table-plugin-export-xlsx'
VXETable.use(VXETablePluginExportXLSX)
<template>
<div class="main-view">
<div class="btn-view">
<el-button size="mini" type="primary" @click="exportEvent">导出</el-button>
</div>
<div class="table-view">
<vxe-table
ref="xTable"
border
auto-resize
highlight-current-row
:radio-config="{ trigger: 'row' }"
:start-index="(tablePage.pageNum - 1) * tablePage.pageSize"
:loading="loading"
show-overflow
align="center"
header-align="left"
size="mini"
:data="tableList"
>
<vxe-table-colgroup
header-align="center"
align="center"
title="ee"
header-class-name="fs"
>
<vxe-table-column
type="seq"
title="序号"
align="center"
fixed="center"
></vxe-table-column>
<vxe-table-column
header-align="center"
align="center"
field="orgName"
label="名称"
sortable
></vxe-table-column>
<vxe-table-column
field="datasetCounts"
header-align="center"
align="center"
label="数量"
sortable
></vxe-table-column>
<vxe-table-column
field="subCounts"
header-align="center"
align="center"
label="调用次数"
sortable
></vxe-table-column>
</vxe-table-colgroup>
</vxe-table>
</div>
<div class="pagination-view">
<el-pagination
background
layout="total, sizes, prev, pager, next,jumper"
:current-page="tablePage.pageNum"
:page-size="tablePage.pageSize"
:page-sizes="pageSizes"
:total="tablePage.total"
@size-change="handleSizeChange"
@current-change="handlePageChange"
/>
</div>
</div>
</template>
exportEvent() {
this.$refs.xTable.exportData({
filename: 'export',
sheetName: 'Sheet1',
type: 'xlsx',
data: this.exportdata,
})
},