vue导入excel

要在Vue中导入Excel，可以使用js-xlsx库。首先通过npm安装js-xlsx:

npm install xlsx

然后在Vue组件中引入xlsx：

import XLSX from 'xlsx';

接下来，在Vue组件中编写处理Excel的代码。下面是一个示例代码，它将读取Excel文件并将数据存储在组件的data属性中：

<template>
  <div>
    <input type="file" @change="handleFileUpload">
    <table>
      <thead>
        <tr>
          <th>ID</th>
          <th>Name</th>
          <th>Age</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="person in people" :key="person.id">
          <td>{{ person.id }}</td>
          <td>{{ person.name }}</td>
          <td>{{ person.age }}</td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script>
import XLSX from 'xlsx';

export default {
  data() {
    return {
      people: []
    };
  },
  methods: {
    handleFileUpload(event) {
      const file = event.target.files[0];
      const reader = new FileReader();

      reader.onload = (e) => {
        const data = e.target.result;
        const workbook = XLSX.read(data, { type: 'binary' });
        const sheetName = workbook.SheetNames[0];
        const sheet = workbook.Sheets[sheetName];
        const rows = XLSX.utils.sheet_to_json(sheet);

        this.people = rows;
      };

      reader.readAsBinaryString(file);
    }
  }
};
</script>

在上面的代码中，我们首先创建一个包含一个文件输入框和一个表格的简单Vue组件。然后，我们在组件的data属性中定义一个people数组，用于保存Excel文件中读取的数据。我们还定义了一个handleFileUpload方法，它将在选择Excel文件后自动调用。

在handleFileUpload方法中，我们首先获取所选Excel文件的二进制数据。然后，我们使用js-xlsx库的XLSX.read方法将二进制数据转换为工作簿对象。接下来，我们使用工作簿对象的SheetNames和Sheets属性获取工作簿的第一个工作表，并将其转换为JSON格式的对象。最后，我们将人员数组分配给组件的data属性中的people属性，以供在表格中显示。

总之，这是一个简单的示例，演示了如何在Vue中导入Excel文件。您可以根据您的需求进行调整和修改。