element-ui 表单中，下拉框选中某个值后，同步更新其他输入框的值-Toy模板网

这篇具有很好参考价值的文章主要介绍了element-ui 表单中，下拉框选中某个值后，同步更新其他输入框的值。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

一、实现效果

elementui下拉框选中事件,elementui,vue

二、实现方法

1.html代码

   <!-- 添加期间数据内容对话框 -->
    <el-dialog :title="title" :visible.sync="addShow" width="500px" append-to-body v-if="addShow">
      <el-form ref="form" :model="form" :rules="addRules" label-width="120px" v-if="addShow">
        </el-form-item>-->
        <el-form-item label="仪器名称" prop="apparatusId" >
          <el-select  v-model="form.apparatusId" placeholder="请选择仪器名称" clearable filterable @change="selectApparatus">
            <el-option
              v-for="item in apparatusList"
              :key="item.id"
              :label="item.apparatusName"
              :value="item.id">
              <!--弹出框展示仪器基本信息-->
              <el-popover
                placement="right"
                width="300"
                trigger="hover">
                <span>部门：{{ item.userDepartment }}</span><br/>
                <span>型号规格：{{ item.apparatusModel }}</span><br/>
                <span>编号：{{ item.id }}</span><br/>
                <span>存放地点：{{ item.storageSite}}</span>
                <el-button slot="reference" type="text" style="width:100%;color:black;">
                  <span style="float: left">{{ item.apparatusName }}</span>
                </el-button>
              </el-popover>
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="部门" prop="userDepartment">
          <el-select v-model="form.userDepartment" placeholder="" :disabled="true">
            <el-option
              v-for="dict in dict.type.department"
              :key="dict.value"
              :label="dict.label"
              :value="dict.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="型号规格 " prop="apparatusModel">
          <el-input v-model="form.apparatusModel" :disabled="true" />
        </el-form-item>
        <el-form-item label="编号" prop="factoryNum">
          <el-input v-model="form.factoryNum" :disabled="true" />
        </el-form-item>
        <el-form-item label="存放地点" prop="storageSite">
          <el-input v-model="form.storageSite" :disabled="true" />
        </el-form-item>
        <el-form-item label="核查方法" prop="inspectMethod">
          <el-input v-model="form.inspectMethod" placeholder="请输入核查方法" />
        </el-form-item>
        <el-form-item label="计划核查日期" prop="planInspectDate">
          <el-date-picker clearable
            v-model="form.planInspectDate"
            type="date"
            value-format="yyyy-MM-dd"
            placeholder="请选择计划核查日期">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="核查人" prop="inspector">
          <el-input v-model="form.inspector" placeholder="请输入核查人" />
        </el-form-item>
        <el-form-item label="备注" prop="rmk">
          <el-input v-model="form.rmk" placeholder="请输入备注" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>

设置选择后的@change事件

2.js代码

//选择设备名称后，自动填充部门、编号、型号规格、存放地点等信息
    selectApparatus(){
      const item = this.apparatusList.find(item1 => item1.id === this.form.apparatusId );
      this.form.userDepartment = item.userDepartment;
      this.form.factoryNum = item.factoryNum;
      this.form.apparatusModel = item.apparatusModel;
      this.form.storageSite = item.storageSite;

    },