vue element upload元件 file-list的動態繫結實現
阿新 • • 發佈:2020-11-19
本文解決,upload元件 file-list的動態繫結list1,list2 ...,實現動態新增,相信很多電商後臺管理系統都會遇到這個需求,例子如下
本例,我是使用的upload預設的上傳地址(很多圖片不能上傳,你可以在本地截幾張圖片,進行測試),我可以上傳多張活動圖片,可以加相應的,名稱,連結描述等,如果有多個活動,可以點選新增活動,在第二個活動又能新增相應的內容,儲存完之後,可以實現回顯,活動詳情頁可以看到新增的幾個活動和相應的活動內容。
實現方法不為一,這是一種特別簡單的。程式碼如下
<template> <div class="view"> <div class="item" v-for="(item,index) in formList" :key="index"> <div style="font-size: 14px; color: #606266;line-height: 40px;">相關圖片資料</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)" style="margin-bottom:20px">刪除</el-button> </div> <el-button type="success" @click="addItem" style="width:1000px">新增活動</el-button> <el-button type="primary" @click="saveItem" style="margin-top:20px;margin-left:0;">儲存活動</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>
主要實現,動態新增多個item,每個item都有對應的多張圖文和介紹,可以刪除,儲存,下次進來可以回顯繼續編輯,詳情展示頁可以展示
github地址,可以clone下來,本地跑一下看看
以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支援碼農教程。