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，選擇了就是切換