在vue中el-table表格导出csv

在Vue中，可以使用第三方库`json2csv`来将JSON数据转换为CSV格式，然后使用浏览器的`Blob`和`URL.createObjectURL`函数来生成下载链接并下载CSV文件。

以下是一个示例代码：

<template>
  <div>
    <el-table :data="tableData" ref="table">
      <el-table-column prop="name" label="Name"></el-table-column>
      <el-table-column prop="age" label="Age"></el-table-column>
    </el-table>
    <el-button @click="handleDownload">Export CSV</el-button>
  </div>
</template>

<script>
import json2csv from 'json2csv'

export default {
  data() {
    return {
      tableData: [
        { name: 'John', age: 30 },
        { name: 'Mary', age: 25 }
      ]
    }
  },
  methods: {
    handleDownload() {
      const fields = ['name', 'age']
      const csvData = json2csv({ data: this.tableData, fields })
      const blob = new Blob([csvData], { type: 'text/csv;charset=utf-8;' })
      const url = URL.createObjectURL(blob)
      const link = document.createElement('a')
      link.setAttribute('href', url)
      link.setAttribute('download', 'data.csv')
      link.style.visibility = 'hidden'
      document.body.appendChild(link)
      link.click()
      document.body.removeChild(link)
    }
  }
}
</script>

在上面的代码中，我们使用`json2csv`将`tableData`数据转换为CSV格式并存储在`csvData`变量中。然后，我们使用浏览器的`Blob`和`URL.createObjectURL`函数来创建一个CSV文件的下载链接。最后，我们使用一个隐藏的链接来模拟点击并下载CSV文件。