element ui表格数据导出

Element UI 提供了一个表格导出组件 `el-table-exporter`，可以方便地将表格数据导出为 Excel 或 CSV 文件。

首先需要安装依赖：

npm install file-saver xlsx

然后在需要使用的组件中引入 `el-table-exporter` 组件：

<template>
  <div>
    <el-button type="primary" @click="handleExport">导出</el-button>
    <el-table :data="tableData" ref="table" style="width: 100%">
      <el-table-column prop="date" label="日期"></el-table-column>
      <el-table-column prop="name" label="姓名"></el-table-column>
      <el-table-column prop="address" label="地址"></el-table-column>
    </el-table>
    <el-table-exporter :columns="columns" :data="tableData" ref="exporter"></el-table-exporter>
  </div>
</template>

<script>
import { ElTableExporter } from 'element-table-exporter';

export default {
  components: {
    ElTableExporter
  },
  data() {
    return {
      tableData: [
        { date: '2022-01-01', name: '张三', address: '北京市' },
        { date: '2022-01-02', name: '李四', address: '上海市' },
        { date: '2022-01-03', name: '王五', address: '广州市' },
        { date: '2022-01-04', name: '赵六', address: '深圳市' }
      ],
      columns: [
        { label: '日期', prop: 'date' },
        { label: '姓名', prop: 'name' },
        { label: '地址', prop: 'address' }
      ]
    }
  },
  methods: {
    handleExport() {
      this.$refs.exporter.export('xlsx', '表格数据');
    }
  }
}
</script>

其中 `columns` 定义了导出的 Excel 表格中的列名和数据对应的字段，`data` 是表格数据，`ref` 属性为 `exporter`，并在需要导出时调用 `export` 方法即可。

目前支持导出的格式有 `xlsx` 和 `csv`，在调用 `export` 方法时需要传入相应的格式和文件名。