复用一个EL-Dialog,实现新增/编辑商品功能
1.实现功能:

利用Props从商品展示界面传row数据过来,实现编辑商品功能。如果不传数据过来,就是新增商品功能。
简化后的代码:

代码复制过来格式很乱,可能有些小的符号遗漏

HTML:
            <el-upload
                class="upload-demo"
                action="https://upload.qiniup.com"
                :data="postPicData"
                :before-remove="beforeRemove"
                :before-upload="beforeUpload"
                :on-success="handleSuccess"
                :on-exceed="handleExceed"
                :on-error="handleError"
                :file-list="picfileList"
                :limit="1"
                list-type="picture"
                accept=".png, .jpg, .jpeg"
            >
              <el-button size="small" type="primary">点击上传</el-button>
              <template #tip>
                <div class="el-upload__tip">只能上传一张作为封面,格式为 jpg/jpeg/png 且不超过 10MB</div>
              </template>
            </el-upload>
script:
       export default {
              name: "dialog", 
              data(){
              return{
                 picfileList:[{}], //保存图片的fileList
                }
              },
                updated() { //生命周期钩子,每次更新dialog时加载表单数据
                this.loadFormData()
             },
             props: {
              diaFormData:{    //父组件传过来的用于初始化表单的数据
              type:Object,
              default:()=>({
              gcover:null     //封面url
              }),
              method:{
                  loadFormData(){
                        this.picfileList[0].url = this.diaFormData.gcover
                    }
              }   
     }
  },
  
2.问题描述:

在这里插入图片描述
编辑商品的时候没有问题,但是每次打开新增商品时,都会出现一个空对象占据fileList。
打印一下:
在这里插入图片描述

3.问题解决:

经过奋斗与请教同学,错误锁定在这一行picfileList:[{}]即使不传值进来,也会创建一个空对象。
所以转换下思路,从原本的定义一个对象数组---->定义一个数组向其中添加对象。
修改后的部分代码:

data(){
              return{
                 picfileList:[], //改动1
                }
            },
methods:{
   loadFormData() {   //改动2
      let imgurl = {}
      imgurl.url = this.diaFormData.gcover
      if (this.diaFormData.gcover != null) {
        this.picfileList.push(imgurl)
      }
      dialogclose() {   //改动3 关闭dialog时清空fileList
      this.picfileList = []
        }
    }
}

至此问题解决。
在这里插入图片描述
Dialog作为组件的父子组件通信参考我之前的文章将element Dialog作为组件,实现点击登陆按钮弹出登录界面思路记录


努力,进取,奋斗!

Logo

前往低代码交流专区

更多推荐