vue table导出

如果你使用的是 Element UI 的表格组件，可以按照以下步骤导出表格数据：

1. 安装 xlsx 库：在终端中运行 `npm install xlsx -S` 或 `yarn add xlsx`。

2. 创建一个导出方法，在其中使用 xlsx 库将表格数据转换为 Excel 文件并导出。

import XLSX from 'xlsx';

export function exportTableData(tableData, fileName) {
  const worksheet = XLSX.utils.json_to_sheet(tableData);
  const workbook = {
    Sheets: { 'data': worksheet },
    SheetNames: ['data']
  };
  const excelBuffer = XLSX.write(workbook, { bookType: 'xlsx', type: 'array' });
  const blob = new Blob([excelBuffer], { type: 'application/octet-stream' });
  const downloadLink = document.createElement('a');
  downloadLink.href = URL.createObjectURL(blob);
  downloadLink.download = `${fileName}.xlsx`;
  document.body.appendChild(downloadLink);
  downloadLink.click();
  document.body.removeChild(downloadLink);
}

3. 在表格组件中添加一个导出按钮，并在点击事件中调用导出方法。

<template>
  <div>
    <el-button type="primary" @click="exportTable">导出表格数据</el-button>
    <el-table :data="tableData" border>
      <!-- 表头和表格内容 -->
    </el-table>
  </div>
</template>

<script>
import { exportTableData } from '@/utils/export';

export default {
  data() {
    return {
      tableData: [
        { id: 1, name: '张三', age: 20 },
        { id: 2, name: '李四', age: 25 },
        { id: 3, name: '王五', age: 30 }
      ]
    };
  },
  methods: {
    exportTable() {
      exportTableData(this.tableData, '表格数据');
    }
  }
};
</script>

这样就可以实现导出 Vue Element UI 表格数据的功能。