100字范文,内容丰富有趣,生活中的好帮手!
100字范文 > 【vue】element-表单中 下拉框选中某个值后 同步更新其他输入框的值

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

时间:2024-03-31 17:25:51

相关推荐

【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_idthis.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_idthis.addMonOutForm.back_fees = resData.data.total_price}})},

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。