zoukankan      html  css  js  c++  java
  • 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="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="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,选择了就是切换

  • 相关阅读:
    MYSQL数据丢失讨论【转】
    MySQL 5.6 新功能之 Index Condition Pushdown (ICP)
    MySQL Binlog 【ROW】和【STATEMENT】选择
    MySQL open_files_limit相关设置
    Python颜色输出和random的学习
    Python 之 【二进制、十进制、八进制、十六进制 】之间的转换【转】
    初识 MySQL 5.5 新功能、参数
    Oracle Inventory关键词解释
    plsql 输出当月的所有日期
    ORA29279: SMTP permanent error: 550 XXX@XX.com... No such user
  • 原文地址:https://www.cnblogs.com/vivin-echo/p/13995270.html
Copyright © 2011-2022 走看看