vue+Element+xlsx 导入并预览

1. 下载插件 cnpm install xlsx --save
2. 引入import XLSX from ‘xlsx’
3. 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) {
				// let file = file.files[0] // 使用传统的input方法需要加上这一步
				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 = [{
						// 	"创建时间":"2019-01-03",
						// 	"姓名":"123",
						// 	"手机":"13898786858",
						// 	"状态":"未",
						// 	"用户名":"管理",
						// 	"角色":"组长",
						// 	"邮箱":"123"
						// }]
						this.tableData = tabJson[0].sheet
						//console.log('数据', this.tableData)
					}
				})
			},
			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)
					// reader.readAsBinaryString(file) // 传统input方法
				})
			}