Vue 表格组件 vxe-table 机动导出指定命据的 CSV 文件的用法

在现实业务开发中，表格数据导出是高频需求。大多数场景下，我们导出的是表格当前展示的数据，但偶然业务必要导出特定的数据集（如：筛选后的效果、选中的数据、或后端返回的原始数据）。本文将基于 vxe-table 组件，先容怎样通过 exportData 方法实现指定命据导出，并提供多种实用场景的办理方案。
exportData 方法分析

vxe-table提供了强盛的导出功能，其 exportData 方法支持机动的设置。关键在于 data 参数——当我们必要导出非表格当前体现的数据时，可以通过该参数传入自界说的数据源。

1. $table.exportData({
2.   type: 'csv',      // 导出格式：csv / xlsx / html / pdf
3.   data: customList  // 自定义数据源，覆盖表格当前数据
4. })

复制代码

代码

1. <template>
2.   
3.     <vxe-button @click="exportEvent">直接导出</vxe-button>
4.     <vxe-table
5.       ref="tableRef"
6.       :export-config="{}"
7.       :data="tableData">
8.       <vxe-column type="seq" width="70"></vxe-column>
9.       <vxe-column field="name" title="Name"></vxe-column>
10.       <vxe-column field="sex" title="Sex"></vxe-column>
11.       <vxe-column field="age" title="Age"></vxe-column>
12.     </vxe-table>
13.   
14. </template>

复制代码

场景1，导出筛选后的数据

当表格开启了筛选功能，用户大概渴望导出的是当前筛选效果，而非原始数据。此时可以获取筛选后的数据源传入。

1. const exportFilteredData = () => {
2.   const $table = tableRef.value
3.   // 获取表格当前筛选后的数据（需配合 vxe-table 的筛选功能）
4.   const filteredData = $table.getData()
5.   $table.exportData({
6.     type: 'csv',
7.     data: filteredData
8.   })
9. }

复制代码

场景2，导出选中行的数据

比方，团结 checkbox 列，可以导出用户勾选的行。

1. const exportSelectedData = () => {
2.   const $table = tableRef.value
3.   const selectedRecords = $table.getCheckboxRecords()
4.   $table.exportData({
5.     type: 'csv',
6.     data: selectedRecords
7.   })
8. }

复制代码

大数据量导出注意事项

当导出的数据量较大时（比方凌驾 5000 条），直接在前端导出大概导致页面卡顿。发起采取后端导出方式，vxe-table 的 exportData 也支持通过 url 参数直接哀求后端接口。

1. $table.exportData({
2.   type: 'csv',
3.   url: '/api/export',  // 后端导出接口
4.   method: 'post',
5.   params: { ids: selectedIds }  // 传递必要参数
6. })

复制代码

通过机动运用 exportData 的 data 参数，可以轻松实现各种定制化的导出需求，极大地提升了表格组件的扩展性。
https://vxetable.cn

免责声明：如果侵犯了您的权益，请联系站长及时删除侵权内容，谢谢合作！qidao123.com:ToB企服之家，中国第一个企服评测及软件市场,开放入驻,技术点评得现金.