el-select实现 @change事件

小白本白，这东西之前没怎么用过（问了一下经常用...我居然没怎么用过..ε=(´ο｀*)))唉），今儿传一个Id的时候还要传一个Name，所以记录一下

原来的下拉框选择器代码：

　　　　　　　　　　<el-col :span="24">
                    <el-form-item
                      label=" "
                      :label-width="'25px'"
                      prop="newClassId"
                      :rules="[
                        {
                          required: true,
                          message: '请选择调入班组',
                          trigger: 'blur'
                        }
                      ]"
                    >
                      <div
                        class="el-input el-input--medium el-input-group el-input-group--prepend"
                        autocomplete="off"
                      >
                        <div class="el-input-group__prepend">调入班组</div>
                        <el-select
                          style="width:100%"
                          v-model="modelForm.newClassId"
                     
                          placeholder="请选择调入班组"
                        >
                          <el-option
                            v-for="item in classInfos"
                            :key="item.id"
                            :label="item.name"
                            :value="item.id"
                          ></el-option>
                        </el-select>
                      </div>
                    </el-form-item>
                  </el-col>

加入change后：

　　　　　　　　　　<el-col :span="24">
                    <el-form-item
                      label=" "
                      :label-width="'25px'"
                      prop="newClassId"
                      :rules="[
                        {
                          required: true,
                          message: '请选择调入班组',
                          trigger: 'blur'
                        }
                      ]"
                    >
                      <div
                        class="el-input el-input--medium el-input-group el-input-group--prepend"
                        autocomplete="off"
                      >
                        <div class="el-input-group__prepend">调入班组</div>
                        <el-select
                          style="width:100%"
                          v-model="modelForm.newClassId"
                   @change="changenewClass"
                          placeholder="请选择调入班组"
                        >
                          <el-option
                            v-for="item in classInfos"
                            :key="item.id"
                            :label="item.name"
                            :value="item.id"
                          ></el-option>
                        </el-select>
                      </div>
                    </el-form-item>
                  </el-col>

changenewClass() {
      for (var i in this.classInfos) {
        if (this.modelForm.newClassId == this.classInfos[i].id) {
          this.modelForm.newClassName = this.classInfos[i].name;
        }
      }
    },

 

也就是编辑表单中的下拉框选择器，传的是classid，但是页面保存想显示classname

受教了
　　@change 和 @click一个样
　　一个是切换的时候触发
　　一个是点击的时候触发

 切换指的是el-select，选择了就是切换