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

时间:2025-03-18 15:56:53

选择下拉框,带出所选数据的其他相应信息,利用@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()
}