解决上传excel表格后数据重复项
//模拟点击(这里是使用自定义上传) :http-request="uploadFile"
<el-form-item label="参加人" style="width: 100vw">
<span style="margin-right: 30px; color: dodgerblue; cursor: pointer" @click="unloadexcel">批量导入</span>
<!-- 上传组件 -->
<el-upload ref="upload" style="display: none" action="#" :limit="1" :before-upload="beforeUpload" accept=".xlsx" class="up-class" :on-success="uploadSuccess" :show-file-list="false" :auto-upload="true" :http-request="uploadFile">
<el-button slot="trigger" size="small" type="primary" class="el-icon-plus el-icon-upload" ref="upbtn">导入数据</el-button>
</el-upload>
<span> <i class="el-icon-s-order"></i> <Template /></span>
</el-form-item>
//上传之前
beforeUpload(file) {
let extension = file.name.substring(file.name.lastIndexOf(".") + 1);
if (extension !== "xlsx") {
this.$message({
message: "上传文件只能是 xlsx格式!",
type: "warning",
});
return false;
}
},
//上传
async uploadFile(file) {
const formData = new FormData();
formData.append("excel", file.file);
const res = await uploadExcel(formData);
const exportArr = res.list.filter((ele) => {
return ele.code !== null;
});
this.drawerData.join_man.forEach((num) => {
if (num.name !== "") {
let arr = [...this.drawerData.join_man, ...exportArr];
//这段代码的功能是将两个数组`this.drawerData.join_man`和`exportArr`合并,并确保合并后的结果中每个元
//素的`code`属性都是唯一的。具体实现过程是通过使用`reduce()`方法和一个空对象`newobj`来实现的。
//首先,代码中使用ES6的展开语法`[...this.drawerData.join_man, ...exportArr]`来将两个数组合并为一个新
//的数组`arr`。接着,定义了一个空对象`newobj`用来存储已经出现过的`code`值。然后使用`arr.reduce()`方
//法,初始值为一个空数组`[]`,对`arr`中的每个元素进行处理。对于每个元素,首先判断当前`code`对应的属性值
//在`newobj`中是否存在。如果存在,则不做任何操作,如果不存
//在,则将该元素添加到结果数组`preVal`中,并在`newobj`中标记该`code`对应的属性值已经存在。
//最后,返回合并去重后的结果数组`preVal`即可。
let newobj = {};
arr = arr.reduce((preVal, curVal) => {
newobj[curVal.code] ? "" : (newobj[curVal.code] = preVal.push(curVal));
return preVal;
}, []);
console.log(arr);
this.drawerData.join_man = arr;
} else {
this.drawerData.join_man = [...exportArr];
}
});
},