element uiel-cascaderは3レベルのリンケージを実現します

element uiel-cascaderが3カスケード接続を実現

データ形式：バックエンドによって指定されるデータ形式はdata：{key： "、value："}です。インターフェースは3回呼び出す必要があります

関数の紹介：element ui el-cascaderは、属性の遅延読み込みを使用して、地区と通りの近隣委員会の3レベルのリンクを実現します（インターフェイスクエリ領域を選択した後、通りを選択するリクエストを送信してから、近隣委員会を選択します）

機能表示：

コードについてナンセンスな話をしないでください：

    <el-cascader 
    @change="logArea"
    v-model="area" 
    id="all"
    :props="ganged"
    style="width:300px"
    size="mini">
    </el-cascader>

export default {
    
    
  data(){
    
    
  return {
    
    
  area:"",
    ganged: {
    
    
        label: "value",
        value: "key",
        lazy: true,
        async lazyLoad(node, resolve) {
    
    
          if (node.level == 0) {
    
    
          //getHefeiDistrictByKey()为发送请求的接口
            let res = await getHefeiDistrictByKey();
            let nodes = res.details.data;
            //resolve 把获取的数据渲染在下拉框中
            resolve(nodes);
          } else if (node.level == 1) {
    
    
            let res = await getHefeiDistrictByKey(node.value);
            let nodes = res.details.data;
            resolve(nodes);
          } else if (node.level == 2) {
    
    
            let res = await getHefeiDistrictByKey(node.value);
            let nodes = res.details.data;
            nodes.forEach((item) => {
    
    
            //关闭第四级
              item.leaf = true;
            });
            resolve(nodes);
          }
        },
      },
     }
  }
   methods: {
    
    
        logArea(){
    
    
          //此处打印的是最后选中获取的值
           console.log(this.area);
         //默默吐槽一下后端,查的时候用的key查询 最后存的时候跟我说存 value 没办法 写吧
         //在这里我投机取巧的直接用dom去取了他的值
        let areaData=  document.querySelector("#all>div>input").value;
          console.log(areaData);
    },
  
}
}

ここでやめて...レンガを動かして昼食を頼んで