Vue前端表格导出组件教程：简单实现CSV格式导出

以下是一个简单的示例，演示如何创建一个导出表格的Vue前端组件：

<template>
  <div>
    <button @click='exportTable'>导出表格</button>
    <table>
      <thead>
        <tr>
          <th>姓名</th>
          <th>年龄</th>
          <th>职业</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for='item in tableData' :key='item.id'>
          <td>{{ item.name }}</td>
          <td>{{ item.age }}</td>
          <td>{{ item.occupation }}</td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        { id: 1, name: '张三', age: 25, occupation: '工程师' },
        { id: 2, name: '李四', age: 30, occupation: '设计师' },
        { id: 3, name: '王五', age: 35, occupation: '销售员' }
      ]
    };
  },
  methods: {
    exportTable() {
      // 创建一个CSV文件内容
      let csvContent = 'data:text/csv;charset=utf-8,';
      csvContent += '姓名,年龄,职业\n';
      this.tableData.forEach((item) => {
        csvContent += `${item.name},${item.age},${item.occupation}\n`;
      });

      // 创建一个下载链接并点击下载
      const encodedUri = encodeURI(csvContent);
      const link = document.createElement('a');
      link.setAttribute('href', encodedUri);
      link.setAttribute('download', 'table.csv');
      document.body.appendChild(link);
      link.click();
    }
  }
};
</script>

<style>
table {
  border-collapse: collapse;
  width: 100%;
}

th, td {
  border: 1px solid black;
  padding: 8px;
  text-align: left;
}

thead {
  background-color: #f2f2f2;
}
</style>

此示例中，我们创建了一个包含一个表格和一个导出按钮的Vue组件。单击导出按钮将触发exportTable方法。该方法将根据表格数据创建一个CSV文件的内容，然后创建一个下载链接并点击下载。

请注意，此示例仅演示了如何将表格数据导出为CSV文件，并未考虑对大型数据集的性能优化。在实际项目中，您可能需要根据实际需求进行调整和优化。