vue 与 json-server 当前页 编辑 ref传值（ 二 ）

接上一篇→ https://blog.csdn.net/qq_39109182/article/details/85160481

当前页修改

修改的弹窗

<!-- 当前页修改 -->
<div class="meng" v-if="ok">
    <div class="meng-box">
        <div class="p-tit">相关信息</div>
        <ul class="bj-box editbox">
            <li>
                <div class="lab-left">ID：</div>
                <div>
                    <input type="text" ref="num" :value=editbox.id />
                </div>
            </li>
            <li>
                <div class="lab-left">标题：</div>
                <div>
                    <textarea ref="tit" :value=editbox.title></textarea>
                </div>
            </li>
            <li>
                <div class="lab-left">城市</div>
                <div>
                    <input type="text" ref="citys" :value=editbox.city />
                </div>
            </li>
            <li>
                <div class="lab-left">姓名</div>
                <div>
                    <input type="text" ref="peos" :value=editbox.peo />
                </div>
            </li>
            <li>
                <div class="lab-left">手机</div>
                <div>
                    <input type="text" ref="tels" :value=editbox.tel />
                </div>
            </li>
            <li>
                <div class="lab-left">时间</div>
                <div>
                    <el-date-picker type="date" v-model="editbox.dataTimes" @change="times" placeholder="选择日期" class="date-inp" value-format="yyyy-MM-dd" ref="dTime" :value=editbox.dTime></el-date-picker>
                </div>
            </li>
            <li>
                <div class="lab-left">头像：</div>
                <div>
                    <!--<img class="tx-img" :src="editbox.pho" :alt="editbox.peo" />-->
				<el-upload
				  class="avatar-uploader"
				  action="123" 
				  :show-file-list="false"
				  :on-success="handleAvatarSuccess"
				  :on-change="onchange"
				  :before-upload="beforeAvatarUpload">
				  <img v-if="imageUrl" ref="phoUrl" :src="imageUrl" class="avatar" width="360" height="180">
				  <i v-else class="el-icon-plus avatar-uploader-icon"></i>
				</el-upload>
                </div>
            </li>
        </ul>
        <div>
            <div>
                <el-button type="primary" @click="handle(editbox)">确定</el-button>
                <el-button type="primary" @click="guanbi()">关闭</el-button>
            </div>       
    </div>
</div>
<!-- 当前页修改 END-->

js部分``

   //、、当前页修改
   	    当前页修改 确定
handle(row){
	if(this.ok == true){
		this.ok=false
	}
	//通过refs获得值	    	 	
	let editbox={
		"id":this.$refs.num.value,
		"title":this.$refs.tit.value,
		"city":this.$refs.citys.value,
		"tel":this.$refs.tels.value,
		"peo":this.$refs.peos.value,
		"dataTimes":this.$refs.dTime.value,
		"pho":this.$refs.phoUrl.src
	}
	console.log(this.editbox)
	this.$axios.put('api/imgListData/'+this.editbox.id,editbox).then((res)=>{
		console.log(res, '修改成功')
	this.test();
	},function(err){
		console.log(err, '修改失败')
	})
},
  //关闭弹窗
guanbi(){
	if(this.ok == true){
		this.ok=false
	}
},
handlexiugai(index,row){
	if(this.ok == false){
		this.ok=true
	}	    	
	this.$message('编辑第'+(index+1)+'行');
	let iData =row;
	this.editbox=iData;
	this.imageUrl=this.editbox.pho
	console.log(iData)
},
//、上传头像
 handlePictureCardPreview(file) {
      this.dialogVisible = true;
},
 handleAvatarSuccess(res, file) {
   this.pho = URL.createObjectURL(file.raw);
},
 beforeAvatarUpload(file) {
     const isJPG = file.type === 'image/jpeg';
     const isLt2M = file.size / 1024 / 1024 < 2;
     if (!isJPG) {
       this.$message.error('上传头像图片只能是 JPG 格式!');
     }
     if (!isLt2M) {
       this.$message.error('上传头像图片大小不能超过 2MB!');
     }
     return isJPG && isLt2M;
},
 onchange(file,fileList){
	let _this = this;
	let event = this.event || window.event;
	file = event.target.files[0];
	let reader = new FileReader(); 
	//      const reader= new  FileReader()
	//转base64
	reader.onload = function(e) {
	       _this.imageUrl = e.target.result //将图片路径赋值给src
	      //   _this.$refs.imageUrl=e.target.result//获取pho的src
	     //      console.log(_this.$refs.pho)
	}
	reader.readAsDataURL(file);
 }
 //、上传头像END