文章目录
- 一、代码示例
- 二、调用导出事件
- 参数详解
- 下载
- 引用
- 三、过滤某列数据导出
一、代码示例
<vxe-button
@click="exportDataEvent"
circle
icon="vxe-icon-download"
>导出</vxe-button>
<vxe-table
border
round
stripe
height="auto"
ref="tableMain"
:export-config="{}"
align="center"
size="small"
:data="consumableList"
>
<vxe-column
type="seq"
title="序号"
fixed="left"
width="80"
>
</vxe-column>
</vxe-table>
二、调用导出事件
// methods方法
exportDataEvent() {
this.$refs.tableMain.exportData({
type: "xlsx",
filename: "仪器设备" ,
original: false,
mode: "all",
isHeader: true,
download: true,
columnFilterMethod({ column }) {
return column.field !== "operation";
},
});
},
参数详解
- type: 导出的文件类型。在这个例子中,我导出为 ‘xlsx’ 格式的 Excel 文件。
- filename: 导出的文件名。
- original: 是否导出源数据。如果设置为 false,则导出的数据会和表格中显示的数据一样(例如,如果你在表格中使用了格式化函数,那么导出的数据也会被格式化)。
- mode: 导出的数据范围。如果设置为 ‘current’,则只导出当前页的数据;如果设置为 ‘all’,则导出所有数据。
- isHeader: 是否导出表头。
- download: 是否自动下载导出的文件。如果设置为 false,则 exportData 方法会返回一个 Promise,这个 Promise resolve 的值是一个包含了导出文件内容的 Blob 对象。
请注意,vxe-table 的 Excel 导出功能依赖于 xlsx 和 FileSaver 这两个库,所以在使用这个功能之前,你需要先安装这两个库
下载
npm install xlsx file-saver
引用
import 'xlsx'
import 'file-saver'
三、过滤某列数据导出
在 vxe-table 中,columnFilterMethod 方法用于在导出数据时过滤列。方法接收一个参数,这个参数是一个对象,包含了列的信息。如果这个方法返回 true,那么这一列会被导出;如果返回 false,那么这一列会被过滤掉,不会被导出。 如果你想过滤掉操作列,你可以在 columnFilterMethod 方法中检查列的 field 或 title 属性,然后根据这个属性的值来决定是否过滤这一列。例如,如果你的操作列的 field 属性是 ‘operation’。
你可以这样写:
columnFilterMethod({ column }) {
return column.field !== 'operation';
}