选择下拉框,带出所选数据的其他相应信息,利用@change事件进行实现。
前端页面代码:
<el-form ref="dataForm" :rules="rules" :model="temp" label-position="right" label-width="80px" style="width: 100%" >
<el-form-item label="业主" prop="ownerId"> <el-select v-model="" class="filter-item" @change="getInfo()"> <el-option v-for="item in ownerList" :key="" :label="" :value=""/> </el-select> </el-form-item> <el-form-item label="电话" prop="phone"> <el-input v-model="" disabled/> </el-form-item> <el-form-item label="楼房号" prop="room"> <el-input ="" disabled/> </el-form-item>
</el-form>
脚本:
temp: { detail: '', repairTime: '', ownerId: '', phone: '', room: '' },
方法:
getInfo(val) { ('用户ID' + val) request({ url: '/owner/detail', method: 'get', params: { id: val } }).then((res) => { ('用户详情查询', res) = = }) }
关掉页面取消按钮或者❌按钮时,会出现将表单熟悉清空,所有需要加以下代码:
resetTemp() { // 表单重置 this.$refs['dataForm'].resetFields() }