基於elementUI省市區層級選擇器元件

使用方法

依賴
1、elementui
2、獲取資料的api介面位於
import{GetCity} from ".src/api/common"
//引入元件
import CityArea from "@c/common/cityArea"
//註冊元件
components: {
   CityArea
  },
 //使用元件
 <CityArea :cityAreaValue.sync="form_data.area"></CityArea>
 /*
 form_data.area 是元件返回給父元件的資料，就是自己選擇的資料的資料
 元件是單向資料流，父元件向子元件傳值，但是子元件不能修改父元件的值          .sync可以修改父元件的值，但只能是簡單資料型別
 */
 

傳入引數： 無

傳出引數：

form_data.area（自己定義接受資料的）

封裝思路

<template>
  <div>
   <el-cascader
    v-model="city_area_value"
    :options="cascader_options"
    :props="cascader_props"
    @change="handleChange">
   </el-cascader>
  </div>
</template>
​
<script>
import{GetCity} from "@/api/common"
export default {
  props: {
   cityAreaValue: {
    type: String,
    default: '',
   }
  },
  components: {},
  data() {
   return {
    city_area_value: '',
    // 省市區級聯選單資料
    cascader_options: [],
    // 動態載入 省市區級聯選單資料
    cascader_props: {
     lazy: true,//開啟動態載入
     lazyLoad (node, resolve) {
      // level 是級聯選單的層級，頁面一旦載入就會自動呼叫該函式，為0級
      let level = node.level;
      // 請求資料
      const  requesrData = {}
      const jsonType = {
                        0: { type: "province" },
                        1: { type: "city", code: "province" },
                        2: { type: "area", code: "city" }
                    }
      // 設定輸入引數
      if(jsonType[level].code){ requesrData[`${jsonType[level].code}_code`] = node.value}
      requesrData.type = jsonType[level].type
      // console.log(node.level)
      // 省市區介面
      GetCity(requesrData).then(response => {
       let data = response.data.data
       // 對返回資料進行處理
       let dataType = jsonType[level].type.toUpperCase();
       console.log(dataType)
       data.forEach(el => {
         el.value = el[`${dataType}_CODE`];
         el.label = el[`${dataType}_NAME`];
         if(level ===2){el.leaf = level => 2;}
        });
       resolve(data)
      })
     }
    }
   };
  },
  methods: {
   handleChange(value) {
    this.$emit('update:cityAreaValue',value.join())
    // console.log(value.join());
   }
  },
};
</script>
​
<style scoped lang="scss">
​
</style>
 

1、資料獲取

level表示層級的，進入頁面是第0級即level=0， 是node節點是你點選的數數包含請求的資料和一些其他資訊如level

通過props 配置 採用動態載入，頁面載入進來會自動執行一次lazyLoad(level=0)函式，將請求介面放在lazyLoad中會自動請求一次資料，得到第一層（level)的資料,點選level=1的節點（就是資料渲染出來的選項）再執行一次lazyLoad函式請求資料。

關鍵點在於根據level 配置不同的請求資料，理不清楚就先用 if 實現功能，再簡化，核心思路是 現將都有的屬性抽出來

requesrData.type = jsonType[level].type     //type是每個都有的屬性，先將它抽出
 

//code屬性第一個沒有，所以先判斷，判定不是第一個再將值賦給請求引數
if(jsonType[level].code){ requesrData[`${jsonType[level].code}_code`] = node.value}

2、請求的資料處理

預設 value 是值 ，label 是渲染的文字，返回的資料格式不對需要重新 遍歷一次賦值

處理後的資料resolve(data) 返回給 cascader_options 讓它渲染