element ui 实现数据的导出

Element UI提供了两种方式来实现数据的导出：

1. 使用el-table的$export方法

在el-table组件上添加ref属性，然后在需要导出数据的方法中调用$refs.table.$export("csv", options)方法，其中"csv"表示导出的文件格式，options是一个包含导出选项的对象。

例如：

<template>
  <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-column prop="address" label="Address"></el-table-column>
  </el-table>
  <el-button @click="exportData">Export Data</el-button>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        { name: 'John', age: 30, address: 'New York' },
        { name: 'Mary', age: 25, address: 'Los Angeles' },
        { name: 'Tom', age: 40, address: 'Chicago' }
      ]
    };
  },
  methods: {
    exportData() {
      this.$refs.table.$export("csv", { 
        filename: "table-data", // 设置导出文件名
        original: false // 是否导出原始数据，如果为true，则会导出未格式化的数据
      });
    }
  }
};
</script>

2. 使用el-table-export组件

el-table-export是一个专门用于导出表格数据的组件，可以方便地设置导出格式、文件名、列过滤等选项。

例如：

<template>
  <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="address" label="Address"></el-table-column>
    <el-table-column label="Action">
      <template slot-scope="scope">
        <el-button type="text" @click="edit(scope.row)">Edit</el-button>
        <el-button type="text" @click="delete(scope.row)">Delete</el-button>
      </template>
    </el-table-column>
  </el-table>
  <el-table-export :data="tableData" :columns="columns" :filename="'table-data'" :show-header="true">
    <el-button slot="button" type="primary">Export Data</el-button>
  </el-table-export>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        { name: 'John', age: 30, address: 'New York' },
        { name: 'Mary', age: 25, address: 'Los Angeles' },
        { name: 'Tom', age: 40, address: 'Chicago' }
      ],
      columns: [
        { prop: 'name', label: 'Name' },
        { prop: 'age', label: 'Age' },
        { prop: 'address', label: 'Address' }
      ]
    };
  },
  methods: {
    edit(row) {
      // 编辑数据
    },
    delete(row) {
      // 删除数据
    }
  }
};
</script>

在该例子中，我们使用了el-table-export组件来导出表格数据。它的data属性指定了要导出的数据，columns属性指定了要导出的列，filename属性指定了导出文件名，show-header属性指定了是否导出表头。最后，我们在组件内部添加了一个slot，用于放置导出按钮。