前言

好久沒更新了，開發(fā)遇到新的東西，記錄一下，公司自研的項目PC端迭代到前后端分離了，巧了遇到新的UI框架 element-ui，雖然不熟，還是被硬著頭皮上。

一、需求及實現(xiàn)效果

需求：在下拉框中選擇一條數(shù)據(jù)，獲取他的id及name數(shù)據(jù)（多參數(shù)）。
實現(xiàn)效果：

二、實現(xiàn)

html

@change="selectDoctor(doctorId)" <!-- 參數(shù)可以不寫，會自帶的 -->

      <el-form-item label="醫(yī)生">
          <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：指做默認(rèn)值（雙向綁定(根據(jù)自己需求來做吧)）
size：選擇框大小
style：選擇框樣式
change：指下拉框選擇的內(nèi)容發(fā)生改變就會觸發(fā)的事件
el-option：指下拉框選擇的內(nèi)容（因為是后臺獲取數(shù)據(jù)，就行遍歷）
key：我也不太清楚，大致知道是個標(biāo)識
label：指下拉框選擇的內(nèi)容（name）
value：選擇后綁定的數(shù)值

事件

多參

    // 醫(yī)生選擇器 doctorId就是el-option value綁定的變量
    selectDoctor (doctorId) {
      // 根據(jù)id進(jìn)行篩選（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)
    }

單參

    // 醫(yī)生選擇器
    selectDoctor (doctorId) {
      this.caNoReportDTO.doctorId = doctorId
    }

總結(jié)

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