- 下载插件 cnpm install xlsx --save
- 引入import XLSX from ‘xlsx’
- element中prop可以为汉字这样就简单多了,省去解析的数据再去遍历修改成英文 注意prop中使用的是汉字
<el-table :data="tableData" style="width: 100%">
<el-table-column v-for="item in cols" :prop="item.label" :label="item.label" width="180">
</el-table-column>
</el-table>
表格表头数据,(这种是固定的几种表头)
cols: [{
prop:"time",
label:"创建时间"
},{
prop:"name",
label:"姓名"
},{
prop:"phone",
label:"手机"
},{
prop:"status",
label:"状态"
},{
prop:"user",
label:"用户名"
},{
prop:"role",
label:"角色"
},{
prop:"mail",
label:"邮箱"
},{
prop:"depart",
label:"部门"
}]
<!--script中代码-->
通过watch监听,调用解析方法
watch: {
'$store.state.dataFile': function() {
console.log(this.$store.state.dataFile)
this.importExcel(this.$store.state.dataFile.files[0])
}
},
解析方法
importExcel(file) {
const types = file.name.split('.')[1]
const fileType = ['xlsx', 'xlc', 'xlm', 'xls', 'xlt', 'xlw', 'csv'].some(item => item === types)
if (!fileType) {
this.$message('格式错误!请重新选择')
return
}
this.file2Xce(file).then(tabJson => {
if (tabJson && tabJson.length > 0) {
this.tableData = tabJson[0].sheet
}
})
},
file2Xce(file) {
return new Promise(function(resolve, reject) {
const reader = new FileReader()
reader.onload = function(e) {
const data = e.target.result
this.wb = XLSX.read(data, {
type: 'binary'
})
const result = []
this.wb.SheetNames.forEach((sheetName) => {
result.push({
sheetName: sheetName,
sheet: XLSX.utils.sheet_to_json(this.wb.Sheets[sheetName])
})
})
resolve(result)
}
reader.readAsBinaryString(file.raw)
})
}