vue2中点击一个按钮把elementui的表格数据导出excel

在 Vue 2 中，可以使用插件将 element-ui 的表格数据导出为 Excel 文件。其中一个常用的插件是 vue-json-excel。

首先，需要在 main.js 中引入 vue-json-excel 并注册为全局组件。

import JsonExcel from 'vue-json-excel'
Vue.component('downloadExcel', JsonExcel)

然后，在需要导出表格数据的组件中，使用 "downloadExcel" 组件。

<template>
  <div>
    <el-button @click="exportExcel">导出Excel</el-button>
    <downloadExcel
      :data="tableData"
      :name="excelName"
      :fields="fields"
      :inline="true"
      :fileName="fileName"
      :original-name="originalName"
    />
  </div>
</template>

<script>
export default {
  data() {
    return {
      excelName: '表格数据',
      fileName: 'data',
      originalName: true,
      fields: ['id', 'name', 'age'],
      tableData: [
        {
          id: 1,
          name: '张三',
          age: 23
        },
        {
          id: 2,
          name: '李四',
          age: 24
        }
      ]
    }
  },
  methods: {
    exportExcel() {
        this.$refs.tableData.downloadExcel()
    }
  }
}
</script>

在这个例子中，点击按钮会触发 exportExcel 方法，导出表格数据。为了能找到那个downloadExcel组件需要在downloadExcel组件上加上一个ref标识，方便在methods中找到它。

请注意，在使用 vue-json-excel 插件时需要安装 file-saver 依赖，如果没有安装可以使用 npm 或 yarn 进行安装。

npm install file-saver

最后需要注意的是,导出数据量不能过大，可能