vue 导出 table

您可以使用Vue.js和Element UI来创建一个表格，并将其导出为Excel。首先需要引入Element UI和xlsx插件：

import { exportJsonToExcel } from '../vendor/Export2Excel.js'
import XLSX from 'xlsx'
import { saveAs } from 'file-saver'

然后在需要导出表格的组件中定义一个方法，在该方法中将表格数据转换为JSON格式，然后使用Export2Excel.js导出Excel文件。

methods: {
    handleExport() {
      import("@/vendor/Export2Excel").then(excel => {
        const tHeader = [ 'Name', 'Age', 'Gender', 'Address' ]
        const filterVal = [ 'name', 'age', 'gender', 'address' ]
        const list = this.tableData
        const data = this.formatJson(filterVal, list)
        excel.export_json_to_excel({
          header: tHeader,
          data,
          filename: `table-${Date.now()}`,
          autoWidth: this.autoWidth,
          bookType: this.bookType
        })
      })
    },
    formatJson(filterVal, jsonData) {
      return jsonData.map(v => filterVal.map(j => v[j]))
    }
}

这里的tHeader和filterVal是用于表头和过滤的字段数组。tableData是要导出的数据数组，formatJson方法是将数据转换为导出格式。最后使用export_json_to_excel方法导出Excel文件即可。