Vue 表格组件 vxe-table 灵活导出指定数据的 CSV 文件的用法
<p>在实际业务开发中，表格数据导出是高频需求。大多数场景下，我们导出的是表格当前展示的数据，但有时业务需要导出特定的数据集（如：筛选后的结果、选中的数据、或后端返回的原始数据）。本文将基于 vxe-table 组件，介绍如何通过 exportData 方法实现指定数据导出，并提供多种实用场景的解决方案。</p><h2 id="exportdata-方法说明">exportData 方法说明</h2>
<p><code>vxe-table</code>提供了强大的导出功能，其 exportData 方法支持灵活的配置。关键在于 data 参数——当我们需要导出非表格当前显示的数据时，可以通过该参数传入自定义的数据源。</p>
<pre><code class="language-javascript">$table.exportData({
type: 'csv', // 导出格式：csv / xlsx / html / pdf
data: customList// 自定义数据源，覆盖表格当前数据
})
</code></pre>
<h2 id="代码">代码</h2>
<p><img src="https://img2024.cnblogs.com/blog/3766032/202603/3766032-20260330173420757-1073511652.png"></p>
<pre><code class="language-html"><template>
<div>
<vxe-button @click="exportEvent">直接导出</vxe-button>
<vxe-table
ref="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.value
if ($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>
</code></pre>
<h2 id="场景1导出筛选后的数据">场景1，导出筛选后的数据</h2>
<p>当表格开启了筛选功能，用户可能希望导出的是当前筛选结果，而非原始数据。此时可以获取筛选后的数据源传入。</p>
<pre><code class="language-javascript">const exportFilteredData = () => {
const $table = tableRef.value
// 获取表格当前筛选后的数据（需配合 vxe-table 的筛选功能）
const filteredData = $table.getData()
$table.exportData({
type: 'csv',
data: filteredData
})
}
</code></pre>
<h2 id="场景2导出选中行的数据">场景2，导出选中行的数据</h2>
<p>例如，结合 checkbox 列，可以导出用户勾选的行。</p>
<pre><code class="language-javascript">const exportSelectedData = () => {
const $table = tableRef.value
const selectedRecords = $table.getCheckboxRecords()
$table.exportData({
type: 'csv',
data: selectedRecords
})
}
</code></pre>
<h2 id="大数据量导出注意事项">大数据量导出注意事项</h2>
<p>当导出的数据量较大时（例如超过 5000 条），直接在前端导出可能导致页面卡顿。建议采用后端导出方式，vxe-table 的 exportData 也支持通过 url 参数直接请求后端接口。</p>
<pre><code class="language-javascript">$table.exportData({
type: 'csv',
url: '/api/export',// 后端导出接口
method: 'post',
params: { ids: selectedIds }// 传递必要参数
})
</code></pre>
<p>通过灵活运用 exportData 的 data 参数，可以轻松实现各种定制化的导出需求，极大地提升了表格组件的扩展性。</p>
<p>https://vxetable.cn</p><br><br>
来源：https://www.cnblogs.com/leid6/p/19796903
頁:
[1]