vue 带搜索的下拉框 el-select下拉框获取选中的整个对象值

一、带搜索的下拉框

<el-form-item label="姓名" prop="employeeName">
  <el-select
    v-model="form.employeeName"
    style="width:240px"
    clearable
    size="small"
    placeholder="输入姓名查询"
    filterable
    remote
    :remote-method="remoteMethod"
    :loading="loading"
    @change="handleRemoteMethodChange($event)"
  >
    <el-option
      v-for="item in pageDataDown"
      :key="item.employeeId"
      :label="item.employeeName"
      :value="item"
    >
      <span>{{ item.employeeName }}</span>
      <span style="color: #8492a6"> {{ item.idCard }}</span>
      <span style="color: #8492a6"> {{ item.phone }}</span>
      <span style="color: #8492a6"> {{ item.dept }}</span>
    </el-option>
  </el-select>
</el-form-item>

// 声明数据
data() {
  return {
    // 遮罩层
    loading: false,
    // 带搜索的下拉框
    pageDataDown: {},
    queryParamsDown: {
      pageNum: 1,
      pageSize: 10,
      employeeName: undefined
    }
  }
}

// 初始化
created() {
  // 带搜索的下拉框
  this.remoteMethod('')
}

// 带搜索的下拉框
remoteMethod(query) {
  this.queryParamsDown.employeeName = query
  this.loading = true
  personApi.listForPage(this.queryParamsDown).then(res => {
    this.loading = false
    this.pageDataDown = res.data
  })
}

二、el-select下拉框获取选中的整个对象值 

// 带搜索的下拉框-选值后处理
handleRemoteMethodChange(item) {
  this.form.employeeIdcard = item.idCard
  this.form.employeePhone = item.phone
  this.form.employeeDept = item.dept
  // 回填下拉框值为正确的值(el-select下拉框获取选中的整个对象值)
  this.form.employeeName = item.employeeName
}

 普通下拉框示例

<el-col :span="12">
  <el-form-item label="考场名称" prop="examRoomName">
    <el-select
      v-model="form.examRoomName"
      style="width:240px"
      clearable
      size="small"
      @change="handleConfigDownChange($event)"
    >
      <el-option
        v-for="item in configDown"
        :key="item.examinationroomId"
        :label="item.examinationroomName"
        :value="item"
      />
    </el-select>
  </el-form-item>
</el-col>

// 下拉框-选值后处理
handleConfigDownChange(item) {
  this.form.examRoomId = item.examinationroomId
  // 回填下拉框值为正确的值(el-select下拉框获取选中的整个对象值)
  this.form.examRoomName = item.examinationroomName
}

参考：elementui select选择器获取选中拿到当前对象_我总是词不达意的博客-CSDN博客_elementui select获取选中值


三、字典下拉框不自动映射值(字符串转数字)

<el-col :span="12">
  <el-form-item label="类型" prop="type">
    <el-select v-model="form.type" style="width:240px" clearable size="small">
      <el-option
        v-for="dict in typeOptions"
        :key="dict.dictValue"
        :label="dict.dictLabel"
        :value="Number(dict.dictValue)"
      />
    </el-select>
  </el-form-item>
</el-col>