编辑页面如何根据接口返回将下拉框选中内容渲染到页面

首先这个页面有5个参数，接口返回的是id，我们需要根据id再去查询其他接口获取名称

这五个参数必须先定义好！！！！！

为什么加感叹号，因为我被坑过，会出现大部分时候这五个值渲染不出来，只有偶尔才会渲染出来的情况,需要在data里先定义好这五个字端的取值，不要直接搞成一个空的，虽说你之后会给它赋值，但是还是先定义好

  projectInfo: {      project_name: '',      group_list:'',      main_rd_name:'',      main_qc_name:'',      reviewer_name:''  }

根据接口返回将下拉框选中内容渲染到页面

以review的下拉框来举例

      <el-form-item label="代码review人" prop="projectreview">   <!--v-model="reviewer"临时绑定一个空的值 ，这个值就是value的值，index是从0开始的 -->   <el-select v-model="projectInfo.reviewer_name" @change="changeReview" placeholder="请选择代码review人"><el-option    v-for="(item, index) in users"    :key="item.user_id"    :label="item.real_name"    :value="`${item.user_id}-${index}`"></el-option>   </el-select>      </el-form-item>

如何获取接口返回id对应的值

我们上面已经将元素绑定到我们自己定义的消息体里了，那现在我们要为消息体赋值，我用的是笨方法，我自我感觉不太好，真正的前端开发不会这么干，但是也能达到效果

先在data里定义好根据review_id查询reviewer_name的参数体

  //初始化页面查询reviewer_id用的查询入参   reviewer_id_query:{},  

定义初始化时页面要执行的方法并为projectInfo赋值

     //初始化页面的时候就调用接口查询测试单的基本信息     async queryAapplicationList(){  // console.log(this.queryTestSheet),  console.log(this.test_name_detail)  queryAapplicationListApi(this.queryTestSheet).then(response=>{  this.projectdetail=response.result.list[0]  console.log(this.projectdetail)  this.history_query.application_id = response.result.list[0].id  this.getApplicationLog(this.history_query)  //初始化的时候根据项目研发负责人的id查询对应的名称  this.main_rd_name_query.user_id=response.result.list[0].main_rd_id  getUserNameByIdApi(this.main_rd_name_query).then(response=>{      this.projectInfo.main_rd_name = response.result.real_name      console.log("hello"+this.projectInfo.main_rd_name)  })  //初始化的时候根据项目项目测试负责人的id来查询对应的名称  this.main_qc_name_query.user_id=response.result.list[0].main_qc_id  getUserNameByIdApi(this.main_qc_name_query).then(response=>{      this.projectInfo.main_qc_name = response.result.real_name      console.log("hello"+this.projectInfo.main_qc_name)  })  //初始化的时候根据项目group_id来查询对应用户组名称  this.group_name_query.group_id=response.result.list[0].group_id  getGroupNameByIdApi(this.group_name_query).then(response=>{      this.projectInfo.group_list = response.result.group_name      console.log("hello"+this.projectInfo.group_list)  })  //初始化的时候根据项目project_id来查询对应项目名称  this.project_id_query.project_id=response.result.list[0].project_id  getProjectNameByIdApi(this.project_id_query).then(response=>{      this.projectInfo.project_name = response.result.project_name      console.log("project"+this.projectInfo.project_name)  })  //初始化的时候根据项目reviewer_id来查询对对应reviewer名称  this.reviewer_id_query.user_id=response.result.list[0].reviewer_id  getUserNameByIdApi(this.reviewer_id_query).then(response=>{      this.projectInfo.reviewer_name = response.result.real_name      console.log("reviewer"+this.projectInfo.reviewer_name)  })  })     }

最后，将queryAapplicationList方法放到mounted里

 async mounted(){     //获取测试单基本信息     await this.queryAapplicationList()     }