数据流导出vue element

可以使用 Vue.js 的导出功能和 Element UI 的表格组件来实现数据流的导出。

首先，在 Vue.js 中定义一个表格组件，使用 Element UI 的表格组件来展示数据。表格组件可以接收数据作为 prop，例如：

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

<script>
export default {
  props: {
    tableData: {
      type: Array,
      required: true
    }
  },
  methods: {
    exportData() {
      // TODO: 导出数据
    }
  }
}
</script>

接下来，在 exportData 方法中使用 JSON.stringify 将数据转换为 JSON 字符串，并创建一个 Blob 对象。然后，使用 URL.createObjectURL 创建一个 URL，将 Blob 对象转换为可下载的文件。最后，使用 a 标签的 download 属性和 click 方法模拟点击下载链接。

完整代码如下：

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

<script>
export default {
  props: {
    tableData: {
      type: Array,
      required: true
    }
  },
  methods: {
    exportData() {
      const dataStr = JSON.stringify(this.tableData)
      const dataBlob = new Blob([dataStr], { type: 'application/json' })
      const downloadUrl = URL.createObjectURL(dataBlob)
      const a = document.createElement('a')
      a.href = downloadUrl
      a.download = 'data.json'
      a.click()
    }
  }
}
</script>

这样，当用户点击导出按钮时，会将数据导出为一个名为 data.json 的 JSON 文件。用户可以通过点击下载链接将文件保存到本地。