vue element ui table 导出

您可以使用以下步骤来导出 Vue Element UI 表格数据：

1. 首先，确保您已经安装了 Element UI 和相关的依赖。您可以通过以下命令来安装 Element UI：

npm install element-ui

2. 在您的 Vue 组件中，导入并注册 Element UI 的 Table 组件。在需要使用表格的地方，使用 `<el-table>` 标签包裹数据。

<template>
  <div>
    <el-button type="primary" @click="exportTable">导出表格</el-button>
    <el-table :data="tableData">
      <!-- 表格列定义 -->
    </el-table>
  </div>
</template>

<script>
import { ElTable, ElTableColumn } from 'element-ui';

export default {
  components: {
    ElTable,
    ElTableColumn,
  },
  data() {
    return {
      tableData: [
        // 表格数据
      ],
    };
  },
  methods: {
    exportTable() {
      // 导出表格逻辑
    },
  },
};
</script>

3. 在 `exportTable` 方法中，编写导出表格的逻辑。您可以使用第三方库，如 `xlsx` 或 `file-saver` 来实现导出功能。以 `xlsx` 为例，您可以按照以下步骤进行安装和使用：

- 安装 `xlsx` 和 `file-saver`：

npm install xlsx file-saver

- 在导出表格的方法中使用 `xlsx` 和 `file-saver`：

import XLSX from 'xlsx';
import { saveAs } from 'file-saver';

exportTable() {
  const wb = XLSX.utils.table_to_book(this.$refs.table.$el);
  const wbout = XLSX.write(wb, { bookType: 'xlsx', bookSST: true, type: 'array' });
  saveAs(new Blob([wbout], { type: 'application/octet-stream' }), 'table.xlsx');
},

以上代码将使用 `xlsx` 将表格数据转换为工作簿，然后使用 `file-saver` 将工作簿保存为名为 `table.xlsx` 的文件。

请注意，您需要根据您的实际项目结构和需求进行适当的调整。这只是一个基本的示例，您可能需要根据您的表格结构和数据格式进行更多的自定义和处理。

希望这可以帮助到您！