ElementUI級聯選擇器問題總結

近期在做智慧校園APP的后台管理系統，用的是ElementUI的組件，這是背景。

在學生信息模塊有個新增表單添加學生信息，里面有個字段叫做“所屬院系專業”，因為是個關聯下拉框，因此就用到了ElementUI的級聯選擇器組件，之前是這種寫法：

<el-form-item label="所屬院系專業" prop="deptId" >
  <el-cascader v-model="dialogForm.deptId" @change="changeSubject" :options="subjectData" :props="{value:'code',label:'name'}" style="width:200px" size="small">
  </el-cascader>
</el-form-item>

 

由於保存后數據庫需要將“院系”和“專業”兩個信息分開保存（因為前台列表中需要分兩個字段顯示院系和專業），所以在保存操作中將獲取到的 deptId 進行了一次拆分（可以拆分的基礎是此級聯選擇器獲取到的值是一個數組）：

_saveStudent () {
  this.dialogForm.subjectId = this.dialogForm.deptId[1]
  this.dialogForm.deptId = this.dialogForm.dept[0]
  ...
｝

但是這樣產生了一個問題。

在測的時候發現，假如新增時輸入的學號與系統已有的學生學號重復，則我給出提示“學號不能重復，請修改”，等修改學號后再次保存，系統提示成功，數據也進了數據庫，但是新增的數據沒有在學生列表中顯示出來。

通過debugger跟代碼，發現是級聯選擇器這塊出的問題，准確來說，是由於第一次保存后，原有級聯選擇器這塊的deptId值在保存操作中已經拆分為了新的 deptId 和 subjectId，因此修改學號后再次點擊保存，則會在新的 deptId 上再進行一次拆分，顯而易見，這種方式是錯誤的。

 ---------------------------------------------------------------------------------------------------------------------------------------------------------------------

解決方案

重新給級聯選擇器定義一個全新的model值，叫做 deptSubjectId，代碼如下：

<el-form-item label="所屬院系專業" prop="deptSubjectId" >
  <el-cascader v-model="dialogForm.deptSubjectId" @change="changeSubject" :options="subjectData" :props="{value:'code',label:'name'}" style="width:200px" size="small">
  </el-cascader>
</el-form-item>

然后保存時，拆分的是 deptSubjectId，不會影響到將要保存的值，如下：

_saveStudent () {
  this.dialogForm.subjectId = this.dialogForm.deptSubjectId[1]
  this.dialogForm.deptId = this.dialogForm.deptSubjectId[0]
　...
｝

 

這樣的話，按照以上步驟，再次進行保存，由於 deptSubjectId 的值一直不會變，因此級聯選擇器中的值也能正常顯示，如下圖：

 

這樣的話保存后，存入數據庫中的 deptId 和 subjectId 也就沒問題，這樣新增的學生信息就可以正常的顯示到學生列表中了。