vue 基于elementUI的选择组件el-select中@change事件返回对象方法

2020/7/11 21:24:43 人评论 次浏览 分类:学习教程

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(),互相转,希望有奇迹出现,然并无卵用。。。
此时已经过了三小时了,开始百度,但是百度上大都是提供@change事件返回对象的方式(官方例子),非我需求,最后好不容易找到一个不同的方式,scope方式,结果试了一大堆,还是不起任何作用。
此时,我心里已经特别愤怒,想扔电脑,想打脸。。。
不过再郁闷,问题还是得解决,想想静静,再加上百度中有人提出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;
    },

再补充一点,今天特别狗屎,让这个问题搞得我,干啥啥不顺,拖地拖把差点绊倒我,去卫生间差点摔一跤,放拖把把子敲到脑袋…总之很多。。。。

总结
我们遇到问题时,一定要冷静,跳出当前的僵局,试着寻找新思路。
最后也希望前端大神提供更好的方式解决该类问题,多谢。。。。

相关资讯

    暂无相关的资讯...

共有访客发表了评论 网友评论

验证码: 看不清楚?
    -->