本文解決,upload組件 file-list的動(dòng)態(tài)綁定list1,list2 ...,實(shí)現(xiàn)動(dòng)態(tài)添加,相信很多電商后臺(tái)管理系統(tǒng)都會(huì)遇到這個(gè)需求,例子如下
清水河ssl適用于網(wǎng)站、小程序/APP、API接口等需要進(jìn)行數(shù)據(jù)傳輸應(yīng)用場(chǎng)景,ssl證書(shū)未來(lái)市場(chǎng)廣闊!成為創(chuàng)新互聯(lián)的ssl證書(shū)銷(xiāo)售渠道,可以享受市場(chǎng)價(jià)格4-6折優(yōu)惠!如果有意向歡迎電話(huà)聯(lián)系或者加微信:13518219792(備注:SSL證書(shū)合作)期待與您的合作!
本例,我是使用的upload默認(rèn)的上傳地址(很多圖片不能上傳,你可以在本地截幾張圖片,進(jìn)行測(cè)試),我可以上傳多張活動(dòng)圖片,可以加相應(yīng)的,名稱(chēng),鏈接描述等,如果有多個(gè)活動(dòng),可以點(diǎn)擊添加活動(dòng),在第二個(gè)活動(dòng)又能添加相應(yīng)的內(nèi)容,保存完之后,可以實(shí)現(xiàn)回顯,活動(dòng)詳情頁(yè)可以看到添加的幾個(gè)活動(dòng)和相應(yīng)的活動(dòng)內(nèi)容。
實(shí)現(xiàn)方法不為一,這是一種特別簡(jiǎn)單的。代碼如下
<template> <div class="view"> <div class="item" v-for="(item,index) in formList" :key="index"> <div >相關(guān)圖片資料</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="活動(dòng)名稱(chēng)"> <el-input v-model="item.name"></el-input> </el-form-item> </el-col> <el-col :span="12"> <el-form-item label="活動(dòng)鏈接"> <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" >添加活動(dòng)</el-button> <el-button type="primary" @click="saveItem" >保存活動(dòng)</el-button> </div> </template> <script> export default { name: "HelloWorld", data() { return { dialogImageUrl: "", dialogVisible: false, formList: [{ pics: [] }] }; }, methods: { // 上傳圖片 onSuccess(response, file, fileList, idx) { // 這里是element的上傳地址,對(duì)應(yīng)的name,url,自己打印fileList對(duì)照 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張" }); }, // 添加活動(dòng) addItem() { this.formList.push({ pics: [] }); }, // 刪除活動(dòng) delItem(idx) { if (this.formList.length > 1) { this.formList.splice(idx, 1); } else this.formList = [{ pics: [] }]; }, // 保存活動(dòng) 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>
主要實(shí)現(xiàn),動(dòng)態(tài)添加多個(gè)item,每個(gè)item都有對(duì)應(yīng)的多張圖文和介紹,可以刪除,保存,下次進(jìn)來(lái)可以回顯繼續(xù)編輯,詳情展示頁(yè)可以展示
github地址,可以clone下來(lái),本地跑一下看看
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持創(chuàng)新互聯(lián)。
名稱(chēng)欄目:vueelementupload組件file-list的動(dòng)態(tài)綁定實(shí)現(xiàn)
新聞來(lái)源:http://muchs.cn/article30/ghecpo.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供網(wǎng)站制作、響應(yīng)式網(wǎng)站、網(wǎng)站策劃、網(wǎng)站設(shè)計(jì)、網(wǎng)站維護(hù)、手機(jī)網(wǎng)站建設(shè)
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶(hù)投稿、用戶(hù)轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請(qǐng)盡快告知,我們將會(huì)在第一時(shí)間刪除。文章觀(guān)點(diǎn)不代表本網(wǎng)站立場(chǎng),如需處理請(qǐng)聯(lián)系客服。電話(huà):028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時(shí)需注明來(lái)源: 創(chuàng)新互聯(lián)