【vue】element-表单中，下拉框选中某个值后，同步更新其他输入框的值

一、实现的效果

 

选中订单编号后，同步更新学生Id与退费金额这两个输入框的值

二、代码实现 

如果选择器里的列表数据与需要同步更新的数据在同一个数组里则用方法一，若不在同一数组里用方法二，根据需要选用

template中代码：(方法一和二template中代码相同 在select中加change事件)

<el-form-item label="订单编号" prop="order_id">
  <div class="dingdanxinxiDIV">
      <el-select v-model="addMonOutForm.order_id" placeholder="请输入订单编号" @change="selectOrderId">
        <el-option v-for="(item, index) in orderList" :key="index" :label="item.order_num" :value="item.unid" />
      </el-select>
   </div>
</el-form-item>
<el-form-item label="学生ID" prop="student_id">
   <div class="dingdanxinxiDIV" style="width: 200px"><el-input v-model="addMonOutForm.student_id" disabled /></div>
</el-form-item>
<el-form-item label="退费金额" prop="back_fees">
  <div class="dingdanxinxiDIV" style="width: 200px"><el-input v-model="addMonOutForm.back_fees" disabled /></div>
</el-form-item>

方法一： 

script methods中代码：

selectOrderId(){
  console.log(this.orderList)
  const item = this.orderList.find(item1=> item1.unid === this.addMonOutForm.order_id)
  console.log(item)
  this.addMonOutForm.student_id = item.student_id
  this.addMonOutForm.back_fees = item.total_price
},

方法二：  

script methods中代码：

selectOrderId() {
     let query = {
       unid: this.addMonOutForm.order_id
     }
     getOrderInfoAPI(query).then(resData => {
        if (resData.code == 200) {
            this.addMonOutForm.student_id = resData.data.student_id
            this.addMonOutForm.back_fees = resData.data.total_price
        }
     })
 },