Vue と Excel の効率的な組み合わせ: データの一括更新とインポートを実現する方法

<template>
  <div>
    <div>
      <input type="file" @change="handleFileUpload" accept=".xlsx, .xls" />
      <button @click="importData">导入数据</button>
    </div>
    
    <table>
      <thead>
        <tr>
          <th>姓名</th>
          <th>年龄</th>
          <th>性别</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="item in data" :key="item.id">
          <td>{{ item.name }}</td>
          <td>{{ item.age }}</td>
          <td>{{ item.gender }}</td>
        </tr>
      </tbody>
    </table>

    <div>
      <input v-model="updateName" placeholder="请输入要更新的姓名" />
      <input v-model="updateAge" placeholder="请输入要更新的年龄" />
      <input v-model="updateGender" placeholder="请输入要更新的性别" />
      <button @click="updateData">批量更新</button>
    </div>
  </div>
</template>

<script>
import XLSX from 'xlsx';

export default {
  data() {
    return {
      data: [],
      updateName: '',
      updateAge: '',
      updateGender: '',
    };
  },
  methods: {
    handleFileUpload(event) {
      const file = event.target.files[0];
      const reader = new FileReader();
      
      reader.onload = (event) => {
        const data = new Uint8Array(event.target.result);
        const workbook = XLSX.read(data, { type: 'array' });
        const worksheet = workbook.Sheets[workbook.SheetNames[0]];
        const excelData = XLSX.utils.sheet_to_json(worksheet);
        this.data = excelData;
      };
      
      reader.readAsArrayBuffer(file);
    },
    importData() {
      // 导入数据的逻辑
    },
    updateData() {
      // 批量更新数据的逻辑
    },
  },
};
</script>