前言

好久沒更新了，開發遇到新的東西，記錄一下，公司自研的項目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
    }

總結

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