实现的效果如下图

安装依赖

npm install xlsx --save

引入

import XLSX from 'xlsx'

Vue.prototype.XLSX = XLSX

结构

v-model="gmDrform.storageTime"

type="datetime"

placeholder="选择日期"

value-format="yyyy-MM-dd HH:mm:ss"

@change="gmDrTimeChange"

>

导入

data中的数据

gmDrform:{storageTime:""},//光猫导入

gmDr:false,

arrList:[],

methods中

gmDrClick(){ // 获取当前时间,并赋值给入库日期

this.gmDr=true

this.gmDrform.storageTime=this.nowTime()

},

gmDrTimeChange(val){//入库日期发生变化,保存到gmDrform.storageTime中

this.gmDrform.storageTime=val

},

gmDrClose(){//关闭模态框,清除数据

this.$refs.gmDrform.resetFields();

},

importExcel() {

this.dialogChangePwdVisible = true;

this.$refs.uploadExcel.click();

},

readExcel(e) {

const files = e.target.files;

if (files.length <= 0) {

//如果没有文件名

return false;

}

const fileReader = new FileReader();

fileReader.onload = ev => {

try {

const data = ev.target.result;

const workbook = XLSX.read(data, {

type: "binary"

});

const wsname = workbook.SheetNames[0]; //取第一张表

const ws = XLSX.utils.sheet_to_json(workbook.Sheets[wsname]); //获取到XLSX表格中的数据,并生成json格式的数据类型

// console.log(ws,666);

let arr = [];

ws.forEach((value, index, ws) => {

arr.push({

typeNo: ws[index]["光猫型号"] + "",

boxNo: ws[index]["光猫箱码"] + "",

snNos: ws[index]["光猫SN码"] + "",

storageTime:this.gmDrform.storageTime+"",

name:"光猫",

category:"光猫",

remarks:"",

});

})

for(let i in arr){

let item = arr[i]

for(let key in item){

// console.log(item[key]);

if(item[key] == "undefined"){

delete item[key]

}

}

}

this.arrList=arr//给arrList赋值,确定导入时传入

} catch (e) {

return false;

}

};

fileReader.readAsBinaryString(files[0]);

},

gmDrSure(){//确定导入

let headers={//axios发送请求时,需要配置请求头

headers:{ 'Accept': 'application/json','Content-Type': 'application/json' }

}

this.startLoading();

let url = this.config.httpHeadUrl + "/api/modem/admin/saveBatchModem";

this.$axios.post(url, JSON.stringify(this.arrList),headers ).then(res => {

this.$message.success("导入成功！");

this.gmDr = false;

this.handleCurrentChange(1);

this.$refs.uploadExcel.value = "";//把之前导入的清空

if(res.data.flag==0){

this.$message("导入表头不正确")

this.gmDr =true

}

},(error) => {

this.$refs.uploadExcel.value = "";//把之前导入的清空

})

},