vue3.2本地快速导出Excel固定表头

Vue 3.2 提供了对 Composition API 的支持，使用该 API 可以更方便地实现组件的逻辑复用和抽象。下面是一个基于 Composition API 的本地快速导出 Excel 固定表头的示例：

<template>
  <div>
    <table>
      <thead>
        <tr>
          <th v-for="column in columns" :key="column.field">{{ column.title }}</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="(row, index) in data" :key="index">
          <td v-for="column in columns" :key="column.field">{{ row[column.field] }}</td>
        </tr>
      </tbody>
    </table>
    <button @click="exportExcel">导出 Excel</button>
  </div>
</template>

<script>
import { ref } from 'vue'
import XLSX from 'xlsx'

export default {
  setup() {
    const columns = ref([
      { title: '姓名', field: 'name' },
      { title: '年龄', field: 'age' },
      { title: '性别', field: 'gender' }
    ])
    const data = ref([
      { name: '张三', age: 18, gender: '男' },
      { name: '李四', age: 20, gender: '女' },
      { name: '王五', age: 22, gender: '男' }
    ])

    const exportExcel = () => {
      const sheet = XLSX.utils.json_to_sheet(data.value)
      sheet['!cols'] = columns.value.map(column => ({ wpx: 100 })) // 设置列宽
      const range = XLSX.utils.decode_range(sheet['!ref']) // 获取数据范围
      range.s.r = 1 // 固定表头
      sheet['!ref'] = XLSX.utils.encode_range(range) // 重新设置数据范围
      const workbook = XLSX.utils.book_new()
      XLSX.utils.book_append_sheet(workbook, sheet, 'Sheet1')
      XLSX.writeFile(workbook, 'data.xlsx')
    }

    return {
      columns,
      data,
      exportExcel
    }
  }
}
</script>

在这个示例中，我们使用了 XLSX.js 库来实现 Excel 的导出。通过 `json_to_sheet` 方法可以将 JSON 数组转换成 XLSX 格式的工作表。然后，我们设置了一些样式，如列宽和固定表头。最后，使用 `writeFile` 方法将工作簿保存为 Excel 文件。

需要注意的是，在使用 Composition API 时，我们使用了 `ref` 来创建响应式数据。这样可以方便地在模板中使用数据，并且在函数中修改数据时，模板中的数据也会自动更新。