element ui下拉框的@change事件，选择数据，带出数据的相应信息

选择下拉框，带出所选数据的其他相应信息，利用@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="temp.ownerId" class="filter-item" @change="getInfo(temp.ownerId)">
    <el-option v-for="item in ownerList" :key="item.id" :label="item.name" :value="item.id"/>
  </el-select>
</el-form-item>
<el-form-item label="电话" prop="phone">
  <el-input v-model="temp.phone" disabled/>
</el-form-item>
<el-form-item label="楼房号" prop="room">
  <el-input v-model.number="temp.room" disabled/>
</el-form-item>

</el-form>

脚本：

temp: {
  detail: '',
  repairTime: '',
  ownerId: '',
  phone: '',
  room: ''
},

方法：

getInfo(val) {
  console.log('用户ID' + val)
  request({
    url: '/owner/detail',
    method: 'get',
    params: {
      id: val
    }
  }).then((res) => {
    console.log('用户详情查询', res)
    this.temp.phone = res.data.phone
    this.temp.room = res.data.room
  })
}

关掉页面取消按钮或者❌按钮时，会出现将表单熟悉清空，所有需要加以下代码：

resetTemp() {
  // 表单重置
  this.$refs['dataForm'].resetFields()
}