element級聯選擇器選擇獲得完整數組

 element組件的change方法默認獲取的只有選擇的id，如果同時我們想要獲得選中的name或其他數據則是不行的

這時候組件本身給我們提供了方法

下面是使用方法

HTML

<el-form-item label="排查地點" class="requireds-label">
  <el-cascader
    v-model="checkPlaceName_ids"
    :options="regionInfoOptions"
    :props="customProps"
    @change="handleChange"
    clearable
    filterable></el-cascader>
</el-form-item>

script

根據不同需求獲得數據，我這里需求是獲得選擇的最后一個id和選擇的name‘/’分割拼接字符串

data() {
  return {
      checkPlaceName_ids:'', // 綁定回顯的參數
      regionInfoOptions: [],// 請求接口獲得的數組
      customProps:{
        value: 'id',   // 自定義當前數組的鍵名
        label: 'name',
        children: 'children'
      }
  }
}

//element組件里的 getCheckedNodes	獲取選中的節點	
getCascaderObj(val, opt) {
    return val.map(function(value, index, array) {
        for (var itm of opt) {
            if (itm.id == value) {
                opt = itm.children;
                return itm;
            }
        }
        return null;
    });
},
handleChange(value) {
    this.form.checkPlaceCode = value[value.length-1];
    const vals = this.getCascaderObj(this.checkPlaceName_ids, this.regionInfoOptions); //選中節點數據
    var names = []
    for(var i =0;i<vals.length; i++) {
      names.push(vals[i].name)
    }
    var str = names.join('/');
    this.form.checkPlaceName = str; //賦值給發送的參數
},

 

原文地址：vue級聯選擇器的getCheckedNodes用法_施玥喵的博客-CSDN博客_getcheckednodes