關於級聯選擇器el-cascader的一些屬性

級聯選擇器如下：

基本用法：

<el-cascader
  v-model="value"
  :options="options"
  @change="handleChange">
</el-cascader>

 

特性：

1.後端返回的數據格式名稱跟前端需要的名稱不一致：

使用:props動態改變

:props="optionProps"

optionProps: {
  value: 'id',
  label: 'name',
  children: 'problemList'
},

2.可以選擇其中某一級的：

級聯選擇器默認只能選擇最後一級的，想要選擇任意一級，加上屬性change-on-select

change-on-select

3.獲取選擇的該級的數據id：

方法changeProblemType獲取的數據是個數組，若是隻想要選擇的該級的數據id，通過遍歷該數組獲取最後一個數值。

@change="changeProblemType"

changeProblemType(value){
  console.log(value)
},

let lengths = this.formName.problemType.length;
let problemType_data = this.formName.problemType[lengths-1];

4.當最後一級爲空數組時，選擇框還是顯示出來了，但是沒內容：

因爲後臺返回的最後一級雖然沒內容，但是是個空數組，所以會顯示空白，通過遞歸判斷是否是空數組，然後設置爲undefined即可。

//獲取問題類型數據
getProblemTypes(){
  this.axios({
    method:'post',
    url:window.API_HOST+'/problemType/getProblemType',
  }).then((res)=>{
    if(res.data.is_success){
      this.problemTypes = this.getTreeData(res.data.rets.problemTypeTree);
    }
  })
},
//遞歸判斷列表，把最後的children設爲undefined
getTreeData(data){
  for(var i=0;i<data.length;i++){
    if(data[i].problemList.length<1){
      // children若爲空數組，則將children設爲undefined
      data[i].problemList=undefined;
    }else {
      // children若不爲空數組，則繼續 遞歸調用 本方法
      this.getTreeData(data[i].problemList);
    }
  }
  return data;
},

 

代碼：

<el-cascader
  v-model="formName.problemType"
  change-on-select
  :show-all-levels="false"
  :props="optionProps"
  :options="problemTypes"
  @change="changeProblemType">
</el-cascader>