vue2+elementui 实现图片上传组件保存后图片回显，复选框回显

1. el-upload 组件回显

组件代码 v-model="opinionForm.imgs" 是表单数据， :file-list="files" files代表当前组件已经上传的图片列表， :auto-upload="true" 需要设置自动提交

       <el-form-item  v-if="showType" prop="imgUrl">
            <el-upload
              ref="upload"
              v-model="opinionForm.imgs"
              :action="imgUpload()"
              multiple
              list-type="picture-card"
              name="img"
              :auto-upload="true"
              style="float:left;"
              :limit="10"
              :on-remove="handleRemove"
              :on-exceed="onExceed"
              :on-change="onChangeImg"
              :before-remove="beforeRemove"
              :on-preview="handlePreview"
              :on-success="handleSuccess"
              :file-list="files"
            >
              <div style="position: relative;float: left">
                <i  style="position: absolute;top: 8px;left: 8px" class="el-icon-plus"></i>
              </div>
            </el-upload>
            <el-dialog :visible.sync="dialogVisible">
              <img width="100%" :src="dialogImageUrl" alt="">
            </el-dialog>
          </el-form-item>

图片回显是保存后重新打开页面后，将后端查询出的图片地址重新赋给files属性，此处需要注意files属性脱离表单对象。就可以实现图片回显

   viewShowImg(){ 
        //将图片赋值给files对象
      this.files = this.opinionForm.imgs.map(t=>{
        var obj = {}
        obj.url = t
        return obj
      })
    },
    getOpinionById(id){   //查询对象
      this.$fetch("/api/opinion/getById",{id:id}).then(re=>{
        this.opinionForm = re.data;
        this.select_file_types = re.data.needFileTypes.split(",");
        this.viewShowImg();
      })
    },

复选框回显

此处为组件代码和效果：

          <template slot="label">
            <i class="el-icon-office-building"></i>
            需要提交文件
          </template>
          <el-form-item  v-if="showType"  prop="select_file_types">
            <el-checkbox-group v-model="select_file_types" >
<!--              <el-checkbox v-for="f in fileTypes" :label="f" :key="f" @change="(val)=>(checkChange(val,f))">-->
              <el-checkbox isLimitDisabled="flase" v-for="f in fileTypes" :label="f" :key="f" >
              </el-checkbox>
              <el-input style="border-bottom: 1px solid #747981;display: inline-block;width: 180px" v-model="otherTypeValue"  ></el-input>
            </el-checkbox-group>
          </el-form-item>
          <span  class="span-text" v-else>
            {{opinionForm.needFileTypes}}
          </span>
        </el-descriptions-item>

需要实现保存后，修改时可以回显之前选中的数据，此处的重点是v-model="select_file_types" 绑定的数组不能是表单对象，否则失效，无法实现数据回显

调用后台查询完成后，将查询的字符换转成数组赋值为v-model即可

this.select_file_types = re.data.needFileTypes.split(",");