Vue 表格组件 vxe-table 灵活导出指定数据的的用法

在实际业务开发中，表格数据导出是高频需求。大多数场景下，我们导出的是表格当前展示的数据，但有时业务需要导出特定的数据集（如：筛选后的结果、选中的数据、或后端返回的原始数据）。本文将基于 vxe-table 组件，介绍如何通过 exportData 方法实现指定数据导出，并提供多种实用场景的解决方案。

exportData 方法说明

vxe-table提供了强大的导出功能，其 exportData 方法支持灵活的配置。关键在于 data 参数——当我们需要导出非表格当前显示的数据时，可以通过该参数传入自定义的数据源。

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

代码

<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>

场景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.value
  const 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 参数，可以轻松实现各种定制化的导出需求，极大地提升了表格组件的扩展性。

vxetable.cn