您好,登錄后才能下訂單哦!
本文解決,upload組件 file-list的動態(tài)綁定list1,list2 ...,實現(xiàn)動態(tài)添加,相信很多電商后臺管理系統(tǒng)都會遇到這個需求,例子如下
本例,我是使用的upload默認的上傳地址(很多圖片不能上傳,你可以在本地截幾張圖片,進行測試),我可以上傳多張活動圖片,可以加相應的,名稱,鏈接描述等,如果有多個活動,可以點擊添加活動,在第二個活動又能添加相應的內容,保存完之后,可以實現(xiàn)回顯,活動詳情頁可以看到添加的幾個活動和相應的活動內容。
實現(xiàn)方法不為一,這是一種特別簡單的。代碼如下
<template> <div class="view"> <div class="item" v-for="(item,index) in formList" :key="index"> <div >相關圖片資料</div> <el-upload action="https://jsonplaceholder.typicode.com/posts/" list-type="picture-card" :on-preview="handlePictureCardPreview" :on-remove="(file, fileList)=>{return handleRemove(file, fileList, index)}" :limit="5" :on-exceed="onExceed" :file-list="item.pics" :on-success="(response, file, fileList)=>{return onSuccess(response, file, fileList, index)}" > <i class="el-icon-plus"></i> </el-upload> <el-dialog :visible.sync="dialogVisible"> <img width="100%" :src="dialogImageUrl" alt /> </el-dialog> <el-form label-position="top" label-width="80px" :model="item"> <el-row :gutter="20"> <el-col :span="12"> <el-form-item label="活動名稱"> <el-input v-model="item.name"></el-input> </el-form-item> </el-col> <el-col :span="12"> <el-form-item label="活動鏈接"> <el-input v-model="item.content"></el-input> </el-form-item> </el-col> </el-row> </el-form> <el-button type="danger" @click="delItem(index)" >刪除</el-button> </div> <el-button type="success" @click="addItem" >添加活動</el-button> <el-button type="primary" @click="saveItem" >保存活動</el-button> </div> </template> <script> export default { name: "HelloWorld", data() { return { dialogImageUrl: "", dialogVisible: false, formList: [{ pics: [] }] }; }, methods: { // 上傳圖片 onSuccess(response, file, fileList, idx) { // 這里是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>
主要實現(xiàn),動態(tài)添加多個item,每個item都有對應的多張圖文和介紹,可以刪除,保存,下次進來可以回顯繼續(xù)編輯,詳情展示頁可以展示
github地址,可以clone下來,本地跑一下看看
以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支持億速云。
免責聲明:本站發(fā)布的內容(圖片、視頻和文字)以原創(chuàng)、轉載和分享為主,文章觀點不代表本網(wǎng)站立場,如果涉及侵權請聯(lián)系站長郵箱:is@yisu.com進行舉報,并提供相關證據(jù),一經查實,將立刻刪除涉嫌侵權內容。