// 这里是element的上传地址，对应的name,url,自己打印fileList对照
this.formList[idx].pics.push({ name: file.name, url: file.url });
},
// 移除图片
handleRemove(file, fileList, idx) {
let Pics = this.formList[idx].pics;
Pics.forEach((item, index) => {
if (file.name == item.name) {
Pics.splice(index, 1);
}
});
},
// 查看图片
handlePictureCardPreview(file) {
this.dialogImageUrl = file.url;
this.dialogVisible = true;
},
onExceed(file, fileList) {
this.$message({
type: "warning",
message: "最多上传5张"
});
},
// 添加活动
addItem() {
this.formList.push({ pics: [] });
},
// 删除活动
delItem(idx) {
if (this.formList.length > 1) {
this.formList.splice(idx, 1);
} else this.formList = [{ pics: [] }];
},
// 保存活动
saveItem() {
this.$message({
type: "success",
message: "保存成功,可以刷新下试试回显效果"
});
console.log(this.formList);
localStorage.setItem("formList", JSON.stringify(this.formList));
}
},
created() {
this.formList = JSON.parse(localStorage.getItem("formList"))|| [
{ pics: [] }
];;
}
};
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.view {
width: 1000px;
margin: 0 auto;
}
.item {
width: 100%;
}
</style>
主要实现，动态添加多个item，每个item都有对应的多张图文和介绍，可以删除，保存，下次进来可以回显继续编辑，详情展示页可以展示
github地址，可以clone下来，本地跑一下看看
