前端工作中遇到的问题总结（一）

布满荆棘的人生 2023-01-07 03:57 254阅读 0赞

1、编辑界面时，vue的界面的输入框只能显示值，不能修改值  
解决：this.$set(this.form,'meetTitleName',res.data.meetTitleName);  
2、当需要多选上传文件时，element-ui上传多少个文件就发送多少个请求，这样附带的表单会重复  
解决：let formData = new FormDate();  
    formData.append("parentId",this.form.parentId);  
    axios.post(  
        process.env.VUE\_APP\_BASE\_API+'/mco/topics/editTitle',  
        formData,  
        \{headers:\{'Content-Type':'multipart/form-data','Authorization':"Bearer"+getToken()\}\}  
    ).then(res=>\{\})  
3、element-ui的表单验证  
<el-form :rules="rules" ref="form"  :model="form">  
    <el-form-item prop="startDept" />  
rules:\{  
    startDept:\{  
    required:true,  
    message:"请填写开始部门名称",  
    trigger:"blur"  
    \}  
\}  
this.$refs.form.validate((valid)=>\{  
    if(valid)\{  
        //el-form 中要加上 ref="form" ，否则显示form中的validate未定义；  
    \}  
\})  
4、当前端使用axios发送请求时，是异步的。需要同步时，需要在触发事件的方法前添加async，该方法的第一次请求的方法前加async，方法的第二次请求便可以使用第一次请求的数据了。  
5、js的forEach()  
    let ids = \[\];  
    this.selectObject.forEach(item=>\{  
        ids.push(item.id);  
    \})  
    //把后端传递过来的list<String> 变为以","隔开的字符串  
    ids = ids.join(',');  
6、v-model绑定的值和下拉框绑定的值不一样，需要在data中重新赋值变量  
7、get请求：function中的data后台获取不到变量的值，那么用params当做变量的key  
8、在数组中循环添加对象；  
let historyMeet = \[\];  
this.selectObject.forEach(item=>\{  
    var obj = \{\},  
    obj.value = item.value;  
    obj.label = item.label;  
    this.historyMeet.push(obj);  
\})  
9、数组移除：this.meetClass = this.meetClass.splice(0,1);