使用elementUi和xlsx做一个导入excel功能

1.在你的项目中安装 ElementUI 和 xlsx 库

复制npm i element-ui xlsx -S

2.在你的 Vue 项目中，导入 ElementUI 和 xlsx 库

复制import Vue from 'vue'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
import XLSX from 'xlsx'

Vue.use(ElementUI)

3.在你的组件中实现导入 Excel 功能

复制<template>
  <div>
    <input type="file" ref="fileInput" style="display: none;" @change="handleFileChange">
    <el-button type="primary" @click="handleImport">导入 Excel</el-button>
    <el-table :data="tableData">
      <el-table-column prop="name" label="姓名"></el-table-column>
      <el-table-column prop="age" label="年龄"></el-table-column>
      <el-table-column prop="address" label="地址"></el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: []
    }
  },
  methods: {
    handleImport() {
      this.$refs.fileInput.click()
    },
    handleFileChange(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 sheet1 = workbook.Sheets[workbook.SheetNames[0]]
        const json = XLSX.utils.sheet_to_json(sheet1)
        this.tableData = json
      }
      reader.readAsBinaryString(file)
    }
  }
}
</script>

以上就是一个完整的导入 Excel 并在表格中展示的示例。在这个示例中，我们通过 input[type=file] 元素实现文件选择，通过 FileReader 对文件进行读取，使用 xlsx 库解析 Excel 数据，最终将解析后的数据展示在 ElementUI 的 Table 组件中。