element下拉框获取选中的内容

前言

好久没更新了，开发遇到新的东西，记录一下，公司自研的项目PC端迭代到前后端分离了，巧了遇到新的UI框架 element-ui，虽然不熟，还是被硬着头皮上。

一、需求及实现效果

需求：在下拉框中选择一条数据，获取他的id及name数据（多参数）。
实现效果：

二、实现

html

@change="selectDoctor(doctorId)" <!-- 参数可以不写，会自带的 -->

      <el-form-item label="医生">
          <el-select
            v-model="doctorName"
            size="mini"
            style="width: 10rem; margin-left:5rem"
            @change="selectDoctor">
            <el-option
              v-for="doctor in caNoReportData.doctorList"
              :key="doctor.id"
              :label="doctor.name"
              :value="doctor.id"></el-option>
          </el-select>
        </el-form-item>

解释：

doctorName：指做默认值（双向绑定(根据自己需求来做吧)）
size：选择框大小
style：选择框样式
change：指下拉框选择的内容发生改变就会触发的事件
el-option：指下拉框选择的内容（因为是后台获取数据，就行遍历）
key：我也不太清楚，大致知道是个标识
label：指下拉框选择的内容（name）
value：选择后绑定的数值

事件

多参

    // 医生选择器 doctorId就是el-option value绑定的变量
    selectDoctor (doctorId) {
      // 根据id进行筛选（id是唯一的，如果获取多个，需要自己重新定义筛选条件）
      let doctor = this.caNoReportData.doctorList.filter((doctor) => { return doctor.id === doctorId })
      // 赋值
      this.caNoReportDTO.doctorDTO.id = doctorId
      // 赋值
      this.caNoReportDTO.doctorDTO.name = doctor[0].name
      console.log('this.caNoReportDTO.doctorDTO:', this.caNoReportDTO.medicalDeptDTO)
    }

单参

    // 医生选择器
    selectDoctor (doctorId) {
      this.caNoReportDTO.doctorId = doctorId
    }

总结

这是我目前想到的较好方法，可能框架也有原本就集成好了的方法，自己并没有完全熟悉吧