Vue与Excel的双剑合璧：如何实现数据的自动填充和导出

<template>
  <div>
    <input v-model="startNum" type="number" placeholder="请输入起始数值">
    <input v-model="step" type="number" placeholder="请输入步长">
    <button @click="generateData">生成数据</button>
    <ul>
      <li v-for="item in dataList" :key="item">{{ item }}</li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      startNum: 0, // 起始数值
      step: 1, // 步长
      dataList: [] // 数据列表
    };
  },
  methods: {
    generateData() {
      this.dataList = []; // 清空数据列表
      for (let i = this.startNum; i <= 100; i += this.step) {
        this.dataList.push(i);
      }
    }
  }
};
</script>

<template>
  <div>
    <button @click="exportData">导出数据</button>
  </div>
</template>

<script>
export default {
  methods: {
    exportData() {
      const worksheet = XLSX.utils.json_to_sheet(this.dataList);
      const workbook = XLSX.utils.book_new();
      XLSX.utils.book_append_sheet(workbook, worksheet, "Sheet1");
      XLSX.writeFile(workbook, "data.xlsx");
    }
  }
};
</script>