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

一、实现效果

二、实现方法

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-optionv-for="item in apparatusList":key="item.id":label="item.apparatusName":value="item.id"><!--弹出框展示仪器基本信息--><el-popoverplacement="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-optionv-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 clearablev-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;},

参考链接：
https://www.cnblogs.com/zhangxue521/p/14518175.html