使用vant 封装的省市区三级联动的组件。用于vue项目中

柔情只为你懂 2023-06-11 14:23 3阅读 0赞

### **效果展示：** ###

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L01pc3NfbGlhbmdybQ_size_16_color_FFFFFF_t_70][]【图1】

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L01pc3NfbGlhbmdybQ_size_16_color_FFFFFF_t_70 1][]【图2】

### **组件描述：** ###

观察上方图片展示，该组件的使用范围比较广。

（1）已知省份名称，可以查到 【图2】所示的。

（2）已知市区，然后得到省，可以查到【图1】所示的。

### **组件使用：** ###

<v-ProCityCountyPicker 
        style="width: 90%; display: inline-block;" 
        :ProCityData="{provincesNew,newCity}" 
        v-on:ProCityCountyVal='ProCityCountyValFn'>
    </v-ProCityCountyPicker>
    
    
    /*说明：
        ProCityData  里面的数据是要传给子组件的，没有的就传入''
        ProCityCountyValFn  这个里面可以取到子组件，传给父的  省、市、区
    */

### **子组件：** ###

<template>
      
      <div id="pro_city_country">
        <div @click="toSelect" class="select_part">
          <span>{
       {provinces}}</span>
          <span>{
       {city}}</span>
          <span>{
       {county}}</span>
        </div>
        <van-popup v-model="show" position="bottom" :style="{ height: '40%' }">
        <van-area :area-list="areaList" :columns-num='colNum' :item-height='38' @confirm='confirmFn' @change="changeFn" @cancel="cancelFn" />
    </van-popup>
      </div>
    </template>
    
    <script>
      import Area from '../../../static/common_js/new_file/area.js'
      var that;
      export default {
        data() {
          return {
            show: false,
            msg: '',
            colNum: '3' ,//省市区显示列数，3-省市区，2-省市，1-省
            city:'请选择',
            county:'请选择',
            areaList:{},
            provinces:''
          }
        },
        props: ['ProCityData'],
        mounted() {
    
        },
        created() {
          console.log('父传过来的provinces',this.ProCityData);
          this.toHandleData(this.ProCityData.provincesNew,this.ProCityData.newCity);
        },
        methods: {
          // 数据处理，得到areaList格式的数据
          toHandleData(params_provinces,params_city){   // 传给子组件的省市区 格式是common_js / new_file / area.js格式
            that = this;
            let areaList = {},    // 需要的数据格式，都存在这个里面
                need_province,   //省
                need_city = [],  // 市
                need_county = [];  // 区县
                areaList.province_list = {},
                areaList.city_list = {},
                areaList.county_list = {};
            let provinceToParent,   // 给父级的完整 省份
                cityToParent;   // 给父级完整的 市
            for(let x in Area.province_list){
              if(Area.province_list[x].substr(0,2) == params_provinces){
                need_province = x + '';   // 得到省
              }
            }
            console.log('need_province',need_province,params_provinces)
    
            provinceToParent = that.provinces= Area.province_list[need_province];
            if(params_city){
              for(let idx in Area.city_list){
                // params_city.substr(0,2) 方便处理  两个字，以上的对比
                if(Area.city_list[idx].substr(0,2) == params_city.substr(0,2)){
                  need_city.push(idx);
                }
              }
              that.city = cityToParent = Area.city_list[need_city[0]]
              for(let county in Area.county_list){
                if(county.substr(0,4) == need_city[0].substr(0,4)){
                  need_county.push(county);   // 区的键
                }
              }
            }else{
              for(let city in Area.city_list){
                if(city.substr(0,2) == need_province.substr(0,2)){
                  need_city.push(city);   // 市的键
                }
              }
              for(let county in Area.county_list){
                if(county.substr(0,2) == need_province.substr(0,2)){
                  need_county.push(county);   // 区的键
                }
              }
            }
    
            console.log('88888',need_city,params_city,need_province,need_city[0].substr(0,4))
    
            console.log('3333333')
            // 省
            areaList.province_list[need_province] = Area.province_list[need_province]
    
            // 市
            need_city.forEach((item)=>{
              areaList.city_list[item] = Area.city_list[item];
            })
            // 区、县county_list
            need_county.forEach((item)=>{
              areaList.county_list[item] = Area.county_list[item];
            })
            that.areaList = areaList;
            console.log(areaList)
          },
          toSelect(){
            this.show = true;
          },
          changeFn(event) {
            console.log('改变',event);
          },
          confirmFn(event){
            this.show = false;
            let arr,SelectProvinceName,SelectCityName,SelectCountyName;
            arr = event;
            SelectProvinceName = arr[0].name;   // 省
            SelectCityName = arr[1].name;   // 市
            SelectCountyName = arr[2].name;  // 区
            this.city = SelectCityName;
            this.county = SelectCountyName;
            this.$emit('ProCityCountyVal',{SelectProvinceName,SelectCityName,SelectCountyName})
            console.log('点击了确定按钮',SelectProvinceName,SelectCityName,SelectCountyName)
          },
          cancelFn(){
            this.show = false;
            console.log('点击了取消按钮');
          }
        }
      }
    </script>
    
    <style scoped="scoped">
      .select_part{
        display: flex;
      }
      .select_part span{
        width: 100%;
        display: block;
        flex: 4;
      }
    </style>

需要使用两个本地文件。

文件下载链接：2019-10-31更新。

\----------完。

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L01pc3NfbGlhbmdybQ_size_16_color_FFFFFF_t_70]: /images/20230531/52cdd7a8e472403786226b78b8a14799.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L01pc3NfbGlhbmdybQ_size_16_color_FFFFFF_t_70 1]: /images/20230531/0d61578357644d88bcaf483bcfb4d8cf.png