第一步
npm install -S file-saver xlsx
npm install -D script-loader
第二步
<div>
<input type="file" @change="ImpData(this)" accept=".csv, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel"/>
<el-table ref="multipleTable" :data="excelData" tooltip-effect="dark" border="true" max-height="300" style="width:900px">
<el-table-column type="selection" width="40">
</el-table-column>
<el-table-column prop="name" label="名称" width="120" > </el-table-column>
<el-table-column prop="unit" label="单位" width="120" > </el-table-column>
<el-table-column prop="use" label="用途"> </el-table-column>
<el-table-column label="操作" width="170">
<template slot-scope="scope">
<el-button size="mini" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
<el-button size="mini" type="danger" @click.native.prevent="handleDelete(scope.row,excelData)">删除</el-button>
</template>
</el-table-column>
</el-table>
</div>
第三步
export default {
name: 'app',
data(){
return{
excelData:[]
}
},
methods:{
ImpData(obj){
let _this = this;
this.file = event.currentTarget.files[0];
var rABS = false; //是否将文件读取为二进制字符串
var f = this.file;
var reader = new FileReader();
FileReader.prototype.readAsBinaryString = function(f) {
var binary = "";
var wb; //读取完成的数据
var outdata;
var reader = new FileReader();
reader.onload = function(e) {
var bytes = new Uint8Array(reader.result);
var length = bytes.byteLength;
for(var i = 0; i < length; i++) {
binary += String.fromCharCode(bytes[i]);
}
var XLSX = require('xlsx');
wb = XLSX.read(binary, {
type: 'binary'
});
outdata = XLSX.utils.sheet_to_json(wb.Sheets[wb.SheetNames[0]]);
outdata.map(v => {
let obj = {}
obj.name= v.名称
obj.unit = v.单位
obj.use = v.用途
_this.excelData.push(obj)
})
_this.reload();
}
reader.readAsArrayBuffer(f);
}
reader.readAsBinaryString(f);
},
handleEdit(index, row){
alert(row.name+','+row.unit +','+row.use );
},
handleDelete(row,rows){
this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
for(var i=0 ;i<rows.length;i++)
{
if(rows[i].name==row.name)
rows.splice(i, 1);
}
this.$message({
type: 'success',
message: '删除成功!'
});
}).catch(() => {
this.$message({
type: 'info',
message: '已取消删除'
});
});
}
}
};