vue 基于elementUI的选择组件el-select中@change事件返回对象方法
·
el-select的选择以后返回对象实现方法
背景需求
下面先看一下需求：
说是有个值班表单，里面要进行值班人员下拉，下拉就下拉吧，他还得再下拉选择以后要把这个人的电话号码也查出来
说实话真不难，不就是将电话号码加到select的下拉对象里
fetchUser() {
this.listLoading = true
getSelectList().then(response => {
this.list = response.data.records
this.listLoading = false
this.total = response.data.length
for(var i=0;i<this.total;i++){
this.useroptions.push({"value":response.data[i].id,"label":response.data[i].name,"tel":response.data[i].phone});
}
console.log( this.useroptions,' this.useroptions');
})
},
这一句就够了，数组对象生成，下拉也没问题，接下来就是通过@change事件进行电话号码回填功能，也很简单，如下
changeOnMainPersonBB(data){
console.log(data,'data11');
this.form.dutyMainPersonTel=data.tel;
},
<el-col :span="12">
<el-form-item label="带班姓名">
<template slot-scope="scope">
<el-select v-model="form.dutyHeader" placeholder="请选择" style="width: 100%;"
@change="changeOnDutyHeaderBB">
<el-option
v-for="item in useroptions"
:key="item.value"
:label="item.label"
:value="item">
</el-option>
</el-select>
</template>
</el-form-item>
</el-col>
很直观，现成官方@Change的事件，返回item对象，没问题，如第一张图所示。
…
以为一切都能结束了，往往事与愿违，因为正常的表单，都有编辑功能，好了点开维护好的值班表单，懵逼了，所有的人员下拉都是value值，不能正确显示label,如下图
点击日期，弹出表单
应该是显示“管理员”，但是显示的是他的id值 1。以前也遇到过这种问题，觉得小case，直觉告诉我应该是数据类型的问题，也就是后台返回的id应该和value需要的数组数据类型保持一致，Number,toString(),互相转，希望有奇迹出现，然并无卵用。。。
最后百度中有人提出id查name的方式，将 :value="item.value"不让他返回对象了，直接返回value值就行，果然编辑时select可以正常赋值了，但是，又不能返回对象了，只能在选择事件以后返回value值。
不过，value本身是useroptions数组对象的value值，我反向查询不就行了，反正是本地数组，通过value遍历一次对象不就可以了吗，百度一下如何通过数组中的属性值查询某一位置的数组值，如下、、
changeOnDutyHeaderBB(data){
var objVal={};
this.useroptions.forEach((val)=>{
if(val.value==data){
objVal=val;
}
})
console.log(objVal,'changedata');
this.form.dutyHeaderPhone=objVal.tel;
},
果然问题解决
下面附上所有的代码
<el-dialog :title="formTitle" :visible.sync="formVisible" width="70%">
<el-form ref="form" :model="form" :rules="rules" label-width="120px">
<el-divider>白班排班</el-divider>
<el-row>
<el-col :span="12" style="display: none;">
<el-form-item label="值班编码"><el-input v-model="form.dutyCode" minlength="1"></el-input></el-form-item>
</el-col>
<el-col :span="12" style="display: none;">
<el-form-item label="值班开始时间">
<el-date-picker v-model="form.dutyStartTime" value-format="yyyy-MM-dd HH:mm:ss" type="datetime" style="width: 100%;" placeholder="选择日期时间"></el-date-picker>
</el-form-item>
</el-col>
<el-col :span="12" style="display: none;">
<el-form-item label="值班结束时间">
<el-date-picker v-model="form.dutyEndTime" value-format="yyyy-MM-dd HH:mm:ss" type="datetime" style="width: 100%;" placeholder="选择日期时间"></el-date-picker>
</el-form-item>
</el-col>
<el-col :span="12" style="display: none;">
<el-form-item label="值班日期" >
<el-date-picker v-model="form.dutyDate" value-format="yyyy-MM-dd" type="date" style="width: 100%;" placeholder="选择日期时间"></el-date-picker>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="带班姓名">
<template slot-scope="scope">
<el-select v-model="form.dutyHeader" placeholder="请选择" style="width: 100%;"
@change="changeOnDutyHeaderBB">
<el-option
v-for="item in useroptions"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
</template>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="带班联系电话"><el-input v-model="form.dutyHeaderPhone" minlength="1"></el-input></el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="带班职务"><el-input v-model="form.dutyHeaderPost" minlength="1"></el-input></el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="主班姓名">
<el-select v-model="form.dutyMainPerson" placeholder="请选择" style="width: 100%;" @change="changeOnMainPersonBB">
<el-option
v-for="item in useroptions"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="主班联系电话"><el-input v-model="form.dutyMainPersonTel" minlength="1"></el-input></el-form-item>
</el-col>
<el-col :span="12" style="display: none;">
<el-form-item label="副班姓名姓名"><el-input v-model="form.dutyDeputyPerson" minlength="1"></el-input></el-form-item>
</el-col>
<el-col :span="12" style="display: none;">
<el-form-item label="副班联系电话"><el-input v-model="form.dutyDeputyPersonTel" minlength="1"></el-input></el-form-item>
</el-col>
</el-row>
<el-divider>夜班排班</el-divider>
<el-row>
<el-col :span="12" style="display: none;">
<el-form-item label="值班编码"><el-input v-model="formtemp.dutyCode" minlength="1"></el-input></el-form-item>
</el-col>
<el-col :span="12" style="display: none;">
<el-form-item label="值班开始时间">
<el-date-picker v-model="formtemp.dutyStartTime" value-format="yyyy-MM-dd HH:mm:ss" type="datetime" style="width: 100%;" placeholder="选择日期时间"></el-date-picker>
</el-form-item>
</el-col>
<el-col :span="12" style="display: none;">
<el-form-item label="值班结束时间">
<el-date-picker v-model="formtemp.dutyEndTime" value-format="yyyy-MM-dd HH:mm:ss" type="datetime" style="width: 100%;" placeholder="选择日期时间"></el-date-picker>
</el-form-item>
</el-col>
<el-col :span="12" style="display: none;">
<el-form-item label="值班日期" >
<el-date-picker v-model="formtemp.dutyDate" value-format="yyyy-MM-dd" type="date" style="width: 100%;" placeholder="选择日期时间"></el-date-picker>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="带班姓名">
<el-select v-model="formtemp.dutyHeader" placeholder="请选择" style="width: 100%;" @change="changeOnDutyHeaderYB">
<el-option
v-for="item in useroptions"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="带班联系电话"><el-input v-model="formtemp.dutyHeaderPhone" minlength="1"></el-input></el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="带班职务"><el-input v-model="formtemp.dutyHeaderPost" minlength="1"></el-input></el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="主班姓名">
<el-select v-model="formtemp.dutyMainPerson" placeholder="请选择" style="width: 100%;" @change="changeOnMainPersonYB">
<el-option
v-for="item in useroptions"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="主班联系电话"><el-input v-model="formtemp.dutyMainPersonTel" minlength="1"></el-input></el-form-item>
</el-col>
<el-col :span="12" style="display: none;">
<el-form-item label="副班姓名姓名"><el-input v-model="formtemp.dutyDeputyPerson" minlength="1"></el-input></el-form-item>
</el-col>
<el-col :span="12" style="display: none;">
<el-form-item label="副班联系电话"><el-input v-model="formtemp.dutyDeputyPersonTel" minlength="1"></el-input></el-form-item>
</el-col>
</el-row>
<el-divider>备注信息</el-divider>
<el-row>
<el-col :span="12">
<el-form-item label="传真"><el-input v-model="formtemp.dutyFax" minlength="1"></el-input></el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="具体事项"><el-input v-model="formtemp.remark" minlength="1"></el-input></el-form-item>
</el-col>
</el-row>
<el-form-item>
<el-button type="primary" @click="save">修改</el-button>
<el-button type="danger" @click="remove">删除</el-button>
<el-button @click.native="formVisible = false">{{ $t('button.cancel') }}</el-button>
</el-form-item>
</el-form>
</el-dialog>
fetchUser() {
this.listLoading = true
getSelectList().then(response => {
this.list = response.data.records
this.listLoading = false
this.total = response.data.length
for(var i=0;i<this.total;i++){
this.useroptions.push({"value":response.data[i].id,"label":response.data[i].name,"tel":response.data[i].phone});
}
console.log( this.useroptions,' this.useroptions');
})
},
changeOnDutyHeaderBB(data){
var objVal={};
this.useroptions.forEach((val)=>{
if(val.value==data){
objVal=val;
}
})
console.log(objVal,'changedata');
this.form.dutyHeaderPhone=objVal.tel;
},
再补充一点，今天特别狗屎，让这个问题搞得我，干啥啥不顺，拖地拖把差点绊倒我，去卫生间差点摔一跤，放拖把把子敲到脑袋…总之很多。。。。
总结
我们遇到问题时，一定要冷静，跳出当前的僵局，试着寻找新思路。
最后也希望前端大神提供更好的方式解决该类问题，多谢。。。。
旨在为数千万中国开发者提供一个无缝且高效的云端环境，以支持学习、使用和贡献开源项目。
更多推荐
18
0- 0
已为社区贡献2条内容
所有评论(0)