在实际业务开发中，表格数据导出是高频需求。大多数场景下，我们导出的是表格当前展示的数据，但有时业务需要导出特定的数据集（如：筛选后的结果、选中的数据、或后端返回的原始数据）。本文将基于 vxe-table 组件，介绍如何通过 exportData 方法实现指定数据导出，并提供多种实用场景的解决方案。
exportData 方法说明
vxe-table提供了强大的导出功能，其 exportData 方法支持灵活的配置。关键在于 data 参数——当我们需要导出非表格当前显示的数据时，可以通过该参数传入自定义的数据源。
$table.exportData({type: 'csv', // 导出格式：csv / xlsx / html / pdfdata: customList // 自定义数据源，覆盖表格当前数据
})
代码
<template><div><vxe-button @click="exportEvent">直接导出</vxe-button><vxe-tableref="tableRef":export-config="{}":data="tableData"><vxe-column type="seq" width="70"></vxe-column><vxe-column field="name" title="Name"></vxe-column><vxe-column field="sex" title="Sex"></vxe-column><vxe-column field="age" title="Age"></vxe-column></vxe-table></div>
</template><script setup>
import { ref } from 'vue'const tableRef = ref()const tableData = ref([{ id: 10001, name: 'Test1', role: 'Develop', sex: 'Man', age: 28, address: 'test abc' },{ id: 10002, name: 'Test2', role: 'Test', sex: 'Women', age: 22, address: 'Guangzhou' },{ id: 10003, name: 'Test3', role: 'PM', sex: 'Man', age: 32, address: 'Shanghai' },{ id: 10004, name: 'Test4', role: 'Designer', sex: 'Women', age: 24, address: 'Shanghai' }
])
const exportEvent = () => {const $table = tableRef.valueif ($table) {const list = [{ id: 10001, name: 'Test1', role: 'Develop', sex: 'Man', age: 28, address: 'test abc' },{ id: 10002, name: 'Test2', role: 'Test', sex: 'Women', age: 22, address: 'Guangzhou' },{ id: 10003, name: 'Test3', role: 'PM', sex: 'Man', age: 32, address: 'Shanghai' },{ id: 10004, name: 'Test4', role: 'Designer', sex: 'Women', age: 24, address: 'Shanghai' },{ id: 10005, name: 'Test5', role: 'Test', sex: 'Man', age: 32, address: 'Shanghai' },{ id: 10006, name: 'Test6', role: 'Develop', sex: 'Women', age: 24, address: 'Guangzhou' },{ id: 10007, name: 'Test7', role: 'Develop', sex: 'Man', age: 40, address: 'Shanghai' },{ id: 10008, name: 'Test8', role: 'Develop', sex: 'Women', age: 43, address: 'Guangzhou' },{ id: 10009, name: 'Test9', role: 'PM', sex: 'Man', age: 39, address: 'Shanghai' },{ id: 10010, name: 'Test10', role: 'Test', sex: 'Women', age: 29, address: 'test abc' }]$table.exportData({type: 'csv',data: list // 关键点：传入自定义数据})}
}
</script>
场景1，导出筛选后的数据
当表格开启了筛选功能，用户可能希望导出的是当前筛选结果，而非原始数据。此时可以获取筛选后的数据源传入。
const exportFilteredData = () => {const $table = tableRef.value// 获取表格当前筛选后的数据（需配合 vxe-table 的筛选功能）const filteredData = $table.getData()$table.exportData({type: 'csv',data: filteredData})
}
场景2，导出选中行的数据
例如，结合 checkbox 列，可以导出用户勾选的行。
const exportSelectedData = () => {const $table = tableRef.valueconst selectedRecords = $table.getCheckboxRecords()$table.exportData({type: 'csv',data: selectedRecords})
}
大数据量导出注意事项
当导出的数据量较大时（例如超过 5000 条），直接在前端导出可能导致页面卡顿。建议采用后端导出方式，vxe-table 的 exportData 也支持通过 url 参数直接请求后端接口。
$table.exportData({type: 'csv',url: '/api/export', // 后端导出接口method: 'post',params: { ids: selectedIds } // 传递必要参数
})
通过灵活运用 exportData 的 data 参数，可以轻松实现各种定制化的导出需求，极大地提升了表格组件的扩展性。
https://vxetable.cn