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 组件中。