【vue】element-表单中,下拉框选中某个值后,同步更新其他输入框的值
一、实现的效果选中订单编号后,同步更新学生Id与退费金额这两个输入框的值二、代码实现如果选择器里的列表数据与需要同步更新的数据在同一个数组里则用方法一,若不在同一数组里用方法二,根据需要选用template中代码:(方法一和二template中代码相同 在select中加change事件)<el-form-item label="订单编号" prop="order_id"><di
·
一、实现的效果
选中订单编号后,同步更新学生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
}
})
},
更多推荐
已为社区贡献1条内容
所有评论(0)