ベースelementUIカスケードセレクタ(EL-cascader)は三リンケージ省、自治体を完了し、エコー

私はあなたが私が知っている知っているかわからない、あなたは私はあなたが知っている知っている方法を知って、あなたが知っていると思った、私はあなたが私が知っていることを知っているだろうと思いました

第二層の都市データダウンロード:https://github.com/541073028/country-data


<エル・フォーム・アイテム・ラベル= " 研究所住所:"小道具= "selectedOptions"> 
    <EL-cascader :オプション= "オプション"  V-モデル= "selectedOptions"  = "handleChangeData"変更@:セパレータ= " ''" > </ EL-cascader> 
    <モデルEL-V-INPUT = "formCustom.Detail"> </ EL-INPUT> 
</フォームEL-アイテム> 

着信データ:
インポートオプション ../../util/「からレベル3-data.js-国"; 

データ内:selectedOptions:[]、//デフォルトのストレージ・オプション:オプション//ストア都市データが表示され 
formCustomを:{ 
    詳細は:" "//アドレスは詳細DetailMap:" 「ステッチ//都市アドレスアドレスアドレス:」」、//州の都市  
}


      

アドレスを選択し、値で

//我々が文字列に文字列配列を渡す必要があり、このトリガーされた3つの結合は、「/」スペーサーによって必要とされる
handleChangeData(値){ 
   this.formCustom.address = value.join(「/」); //得市民のアドレス
}
 
//編集インタフェース
のエディットリスト(){ //文字列連結アドレスアドレス"\ XA0"空間間隔this.formCustom.DetailMap + = this.formCustom.address + "\ XA0" + this.formCustom.Detail;   
     / /ライン上で過去に渡されたパラメータ渡し
     :アドレスthis.formCustom.DetailMapを 
}
     
      

エコー

//対応するデータ表示
ShowList(){ 
      CONST = {REQ伝送パラメータ対応する}; 
      gymnasiumLookVue(REQ).then(RES => { 
        IF(res.data.code == "200は、"){ 
          this.introductionListLook = res.data .data.rows; 
          this.introductionListLook.map(項目=> { 
            //アドレスエコー
            //カット州アドレスと説明
            2つの領域を分離するだけで上付き空間によって追加//三のリンケージが0です、後の関連で説明する三つのための1は、特定のアドレスである
            (「\ XA0」)アドレスデータ= item.address.splitを聞かせて、同じ値にリンクされている// 3つのラベルは、それが開いて切断ように「/」ではない
            LETを=アドレスデータselectData [0] .split( "/"); //アドレス州(3つの結合)this.selectedOptions = selectData; 
            //具体的に後述する都市を希望
            this.formCustom.Detail =アドレスデータ[1]。
            
            
            
          });  
        }他{
          falseを返します。
        } 
      })。
    }

おすすめ

転載: www.cnblogs.com/home-/p/12020744.html