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

一、带搜索的下拉框(带搜索的下拉框-选值后处理)

关键点：均需先改value赋值为整个item对象(:value="item")，然后在后面 回填下拉框值为正确的值

                否则只能获取到单个value值

<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
  })
}

// 下拉框-选值后处理
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-select下拉框)获取选中的整个对象值 (普通下拉框-选值后处理)

关键点：均需先改value赋值为整个item对象(:value="item")，然后在后面 回填下拉框值为正确的值

                否则只能获取到单个value值

<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-form-item label="操作项目" prop="apply">
  <el-select
    v-model="queryParams.apply"
    placeholder="请选择操作项目"
    clearable
    size="small"
    style="width:200px"
  >
    <el-option
      v-for="dict in applyOptions"
      :key="dict.dictValue"
      :label="dict.dictLabel"
      :value="dict.dictValue"
    />
  </el-select>
</el-form-item>

// 字典数据-操作项目
applyOptions: []

// 字典查询-操作项目
this.getDataByType('tzzy_yjgl_apply').then(res => {
  this.applyOptions = res.data
})