elementUI:Upload组件list-type: picture-card上传闪动

已标记关键词 清除标记
# el-upload组件代码: ``` <template> <el-upload class="avatar-uploader" :class="{avatarUploaderMimi:size == 'mini', disabled:fileList.length >= (imageCount?imageCount:1)}" :action="uploadUrl" :file-list="fileList" :ref="refUpload" name="file" list-type="picture-card" :on-change="handleChange" :on-remove="handleRemove"> <div class="avatar-uploader-center"> <i class="el-icon-plus avatar-uploader-icon"></i> <div class="el-upload__tip" v-show="text">{{text}}</div> </div> </el-upload> </template>  <script> import Config from '@/common/js/config'; /** * @param imageUrl : [{url:''}] * @param imageCount : 上传数量 * @param text * @returns arr */ export default { name: 'uploadImg', props: ['imageUrl', 'imageCount', 'text' , 'size','refUpload'], data() { return { uploadUrl:'', fileList:[], }; }, created() { this.uploadUrl = Config.uploadUrl; if(this.imageUrl == '' || this.imageUrl == undefined || this.imageUrl == null){ this.fileList = []; } if(this.imageUrl && this.imageUrl.length > 0){ if(this.imageUrl[0].url == '' || this.imageUrl[0].url == null || this.imageUrl[0].url == undefined){ this.fileList = []; }else { this.fileList = this.imageUrl; } } }, methods: { imgRemove(){ console.log(this.$refs); this.$refs[this.refUpload].clearFiles(); }, handleChange(file, fileList) { this.fileList = fileList; }, handleRemove(file, fileList) { this.fileList = fileList; }, beforeAvatarUpload(file) { const isJPEG = file.type === 'image/jpeg'; const isJPG = file.type === 'image/jpg'; const isPNG = file.type === 'image/png'; const isGIF = file.type === 'image/gif'; const isLt2M = file.size / 1024 < 512; if (!isLt2M) { this.$message.error('上传图片大小不能超过512k!'); } return (isJPG || isJPEG || isPNG || isGIF) && isLt2M; }, // 返回图片在服务器的URL getUploadImage(){ let imgUrl; this.fileList.map(item => { if(item.response){ imgUrl = item.response.data; }else { imgUrl = item.url; } }); return imgUrl; }, } } </script> <style> .avatar-uploader .el-upload { line-height: inherit; } .avatar-uploader .el-icon-close-tip{ opacity: 0; } .avatar-uploader .el-upload, .avatar-uploader .el-upload-list__item{ width: 100px !important;; height: 100px !important;; } .avatarUploaderMimi .el-upload, .avatarUploaderMimi .el-upload-list__item{ width: 50px !important;; height: 50px !important;; } .avatar-uploader.disabled .el-upload--picture-card { display: none; } .avatar-uploader-center{ display: flex; align-items: center; justify-content: center; flex-direction: column; height: 100%; } </style> ``` # 父组件调用代码 ``` <div class="input-wrap" v-for="(item,index) in skuList" :key="RndNum(8)"> <upload-img ref="skuImgList" :ref-upload="'refUpload' + RndNum(4)" :image-count="uploadCount" size="mini" class="sku-img"></upload-img> <div class="input-wrap"> <span style="color: blue;cursor: pointer;" @click="removeSku(item,index)">删除</span> </div> </div> script============= removeSku(item, index) { this.$refs.skuImgList[index].imgRemove(); this.skuList.splice(index, 1); }, ``` # 删除前=========================== ![删除前](https://img-ask.csdn.net/upload/201812/12/1544592841_873819.png) # 删除后============================ ![删除后](https://img-ask.csdn.net/upload/201812/12/1544592892_314881.png) 我尝试过给子组件加v-if显示隐藏,不行,也尝试过把el-upload拿出来直接用然后把列表内每一项加一个fileList来使用也不行,实在是搞不懂了。 求大神指教!
©️2020 CSDN 皮肤主题: 编程工作室 设计师:CSDN官方博客 返回首页