基於el-cascader 封裝省市區層級選擇器組件

基於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（自己定義接受數據的）

參數名	類型	備注
form_data.area	String	綁定到你自己定義的數據里

封裝思路

<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 讓它渲染