先上图片如下:
流程描述:
1、点击用户时通过ID获取用户信息回显到右侧页面(注:异常在检查医生处,下房详细描述);
2、选择或修改检查医生,此处代码如下;
<el-select v-model="searchRepUser1">
<el-option v-for="item in userList" :key="item.code" :label="item.name" :value="item.code"></el-option>
</el-select>
3、保存结论;
BUG描述:
searchRepUser1为医生名称,保存结论时将提交选择器获取到的医生的code值(数值,如1)。正常操作时选择医生页面显示医生名称,获取code传到后台;当点击用户时,code值回显,通过调用方法遍历回显医生名称到searchRepUser1。到这里是没有问题的,但是如果在回显后如果不进行任何操作,那么searchRepUser1存的仍旧是医生名称。再次保存时就会直接提交医生名称而不再是code值。
解决方法:
主要是因为数据的双向绑定,页面回填为姓名时接口上传的值同时也由code值变成了用户姓名,导致后台接口接收数据出现问题。
想到过在v-model中直接通过filters进行过滤,但由于上传时仍旧为姓名导致失败。后采用下面的方式,略繁琐,但由于项目急暂时没想到更好的注意。
代码如下:
computed:{
searchRepUser:{
get(){
//遍历数据 通过code获取用户姓名
for(var i in this.userList) {
if(this.userList[i].code == this.repuserCode) {
return this.userList[i].name
}
}
},
set(val){
for(var i in this.userList) {
if(this.userList[i].name == val) {
//code赋值并返回姓名
this.repuserCode = this.userList[i].code
return this.userList[i].name
}
}
return this.repuserCode
}
}
利用计算属性中特有的set和get方式,get方法在通过接口获取到code值时通过遍历数据获取到对应的用户姓名,以显示在页面。正常修改或直接上传时通过set方式遍历数据,通过匹配姓名(val始终为当前选择器显示的用户姓名)获取code值并进行赋值,接口上传时传递的code值为this.repuserCode,而仍旧向页面返回用户姓名。