min-ui 省市区三级联动

直接上代码

html

  <template>
  <div class="three-level-address" id="three_level_address">
    <div class="region-div">
      <span class="input-icon"><i class="iconfont icon-dizhi"></i></span>
      <input type="text" placeholder="请选择三级地址" v-model="region" maxlength="80" readonly="readonly" @click="showAddressPicker" />
      <mt-popup v-model="regionVisible" position="bottom" class="region-popup">
        <mt-picker :slots="myAddressSlots" valueKey="name" :visibleItemCount	="5" @change="addressChange" :itemHeight="40"></mt-picker>
      </mt-popup>
 
      <div class="data-show-div">
        <p><span>三级地址：</span>{{region}}</p>
        <p><span>省：</span>{{province}}</p>
        <p><span>市：</span>{{city}}</p>
        <p><span>县：</span>{{county}}</p>
        <p><span>省级代码：</span>{{provinceCode}}</p>
        <p><span>市级代码：</span>{{cityCode}}</p>
        <p><span>县级代码：</span>{{countyCode}}</p>
      </div>
 
 
    </div>
  </div>
</template>

js

<script>
  import Vue from 'vue'
 
  import { Popup } from 'mint-ui';
  Vue.component(Popup.name, Popup);
  import { Picker } from 'mint-ui';
  Vue.component(Picker.name, Picker);
 
 
  //引入省市区数据json文件
  import threeLevelAddress from '@/assets/json/threeLevelAddress.json'
 
 
  export default {
    data(){
      return{
        region:'',//三级地址
        province:'',//省
        city:'',//市
        county:'',//县
        provinceCode:'',//省级代码
        cityCode:'', //市级代码
        countyCode:'',//县级代码
 
        regionVisible:false,//弹出框是否可见
        regionInit:false,//禁止地区选择器自动初始化，picker组件会默认进行初始化，导致一进入页面就会默认选中一个初始3级地址
 
        //picker组件插槽
        myAddressSlots: [
          //省
          {
            flex: 1,
            values: this.getProvinceArr(), //省份数组
            className: 'slot1',
            textAlign: 'center'
          },
           //分隔符
          {
            divider: true,
            content: '',
            className: 'slot2'
          },
          //市
          {
            flex: 1,
            values: this.getCityArr("北京市"),
            className: 'slot3',
            textAlign: 'center'
          },
          {
            divider: true,
            content: '',
            className: 'slot4'
          },
          //县
          {
            flex: 1,
            values: this.getCountyArr("北京市","北京市"),
            className: 'slot5',
            textAlign: 'center'
          }
        ],
      }
    },
    methods:{
      //打开地址选择器
      showAddressPicker(){
        this.regionVisible = true;
      },
      //picker组件的change事件，进行取值赋值
      addressChange(picker, values){
        console.log(picker);
        console.table(values);
        if (this.regionInit){
          //取值并赋值
          this.region = values[0]["name"] + values[1]["name"] + values[2]["name"];
          this.province = values[0]["name"];
          this.city = values[1]["name"];
          this.county = values[2]["name"];
          this.provinceCode = values[0]["code"];
          this.cityCode = values[1]["code"];
          this.countyCode = values[2]["code"];
 
          console.log(picker.getSlotValue(0));
          console.table(picker.getSlotValues(0));
          console.table(picker.getValues());
          //给市、县赋值
          picker.setSlotValues(1, this.getCityArr(values[0]["name"]));
          picker.setSlotValues(2, this.getCountyArr(values[0]["name"], values[1]["name"]));
        }else {
          this.regionInit = true;
        }
      },
      //遍历json，返回省级对象数组
      getProvinceArr() {
        let provinceArr = [];
        threeLevelAddress.forEach(function (item) {
          let obj = {};
          obj.name = item.name;
          obj.code = item.code;
          provinceArr.push(obj);
        });
        return provinceArr;
      },
      //遍历json，返回市级对象数组
      getCityArr(province) {
        // console.log("省：" + province);
        let cityArr = [];
        threeLevelAddress.forEach(function (item) {
          if (item.name === province) {
            item.children.forEach(function (args) {
              let obj = {};
              obj.name = args.name;
              obj.code = args.code;
              cityArr.push(obj);
            });
          }
        });
        return cityArr;
      },
      //遍历json，返回县级对象数组
      getCountyArr(province,city){
        let countyArr = [];
        threeLevelAddress.forEach(function(item){
          if (item.name === province){
            item.children.forEach(function (args) {
              if (args.name === city){
                args.children.forEach(function (param) {
                  let obj = {};
                  obj.name=param.name;
                  obj.code=param.code;
                  countyArr.push(obj);
                })
              }
            });
          }
        });
        // console.log(countyArr);
        return countyArr;
      },
    },
    mounted(){
      //初始化设备高度为设备高度height 100%
      let orderHeight = window.innerHeight;
      document.getElementById("three_level_address").style.height = orderHeight + 'px';
      // this.myAddressSlots[0].values = threeLevelAddress;
      // this.myAddressSlots[2].values = threeLevelAddress[0].children;
      // this.myAddressSlots[4].values = threeLevelAddress[0].children[0].children;
    }
  }
 
</script>

css

<style scoped>
     *{padding: 0;margin: 0;}
    ul li{list-style: none;line-height: 1rem;font-size: .6rem;}
    .banner img{width:100%;}
    .container h1{color:rgba(51,51,51,1);font-size: .7rem;font-weight: normal;padding-left:1rem;line-height: 1.2rem;margin-top: .5rem;}
    .tab{overflow: hidden;width: 8.4rem;margin:1.5rem auto 1rem;}
    .tab li{width:4rem;height:1.5rem;float:left;text-align: center;border-radius:4px 0px 0px 4px;border:1px solid rgba(86,144,249,1);color:rgba(86,144,249,1);font-size: .7rem;line-height: 1.5rem;}
.tab li:nth-child(2){border-radius:0px 4px 4px 0px;}
.tab li.active{color:#fff;background:rgba(86,144,249,1);}
.line{background: #F7F9FB;height:.5rem;}
.upload{position: relative;padding-bottom: 2rem;}
.upload .add{width: 4.3rem;display: block;margin:2rem auto 1rem;}
.upload p{text-align: center;color:#DCDCDC;font-size: .7rem;}
.upload .tip{position: absolute;right:0;top:-.5rem;font-size: .7rem;overflow: hidden;}
.upload .tip span{display: block;color:#5690F9;padding:.5rem 1rem 1rem 1rem;position: relative;}
.upload .tip span:nth-child(2){color:#DD1E13;}
.upload h4{font-size: .75rem;text-align: center;font-weight: normal;margin-bottom: 1rem;}
.upload .receipt{padding:0 1rem;line-height: 1.2rem;color:#666666;text-align: left;}
.upload h4 span{position: relative;display: inline-block;top:-10px;left:8px;}
.jiant{
    position: absolute;
	left: 0px;
	top: 0px;
	width: 6px;
	height: 6px;
	border-top: 2px solid #999;
	border-right: 2px solid #999;
	transform: rotate(135deg);
}
.upload h4 span.active .jiant{transform: rotate(315deg);top:2px;}
.verCode button{padding:.3rem .8rem;background: #5690F9;color:#fff;font-size: .7rem;border-radius: .2rem;margin-left: 1rem;outline: none;border:none;}

.upload .img-avatar{border:2px solid #acc8fb;width:40%;display: block;margin:2rem auto 1rem;}
.upload .addUp .uppic{width: 4.3rem;overflow: hidden;position: absolute;top:0;left:50%;margin-left:-2.15rem;height:4.3rem;opacity: 0; }
.upload .tip span .uppic{position: absolute;top:0;left:0;overflow: hidden;z-index: 11;opacity: 0;}
.verCode button.getYzmCode{background: #8bb1f6;}
.verCode button.getYzm{background: #5690F9;}
.invoiceSubmit .citycode .ci{position: relative;right:1rem;top:-6px;}


 .three-level-address{
    width: 100%;
    text-align: left;
    background: black;
    color: #ffffff;
  }
  .region-div{
    width: 100%;
    padding-top: 1rem;
  }
  .input-icon{
    display: inline-block;
    vertical-align: middle;
  }
  .input-icon i{
    font-size: 2rem;
  }
  .region-div input{
    width: 70%;
    font-size: 1rem;
    line-height: 2rem;
    border-radius: 5px;
    outline: none;
    text-align: right;
    color: black;
  }
  .region-popup{
    width: 100%;
  }
  .data-show-div{
    margin-top: 1rem;
    margin-left: 1rem;
    color: #45C473;
  }
  .data-show-div span{
    color: #ffffff;
    font-size: 0.8rem;
  }
</style>

 

 

其中三级联动json文件，部分代码

[
    {
      "code": "110000",
      "name": "北京市",
      "children": [
        {
          "code": "110100",
          "name": "北京市",
          "children": [
            {
              "code": "110101",
              "name": "东城区"
            },
            {
              "code": "110102",
              "name": "西城区"
            },
            {
              "code": "110105",
              "name": "朝阳区"
            },
            {
              "code": "110106",
              "name": "丰台区"
            },
            {
              "code": "110107",
              "name": "石景山区"
            },
            {
              "code": "110108",
              "name": "海淀区"
            },
            {
              "code": "110109",
              "name": "门头沟区"
            },
            {
              "code": "110111",
              "name": "房山区"
            },
            {
              "code": "110112",
              "name": "通州区"
            },
            {
              "code": "110113",
              "name": "顺义区"
            },
            {
              "code": "110114",
              "name": "昌平区"
            },
            {
              "code": "110115",
              "name": "大兴区"
            },
            {
              "code": "110116",
              "name": "怀柔区"
            },
            {
              "code": "110117",
              "name": "平谷区"
            },
            {
              "code": "110128",
              "name": "密云县"
            },
            {
              "code": "110129",
              "name": "延庆县"
            }
          ]
        }
      ]
    },
    {
      "code": "120000",
      "name": "天津市",
      "children": [
        {
          "code": "120100",
          "name": "天津市",
          "children": [
            {
              "code": "120101",
              "name": "和平区"
            },
            {
              "code": "120102",
              "name": "河东区"
            },
            {
              "code": "120103",
              "name": "河西区"
            },
            {
              "code": "120104",
              "name": "南开区"
            },
            {
              "code": "120105",
              "name": "河北区"
            },
            {
              "code": "120106",
              "name": "红桥区"
            },
            {
              "code": "120110",
              "name": "东丽区"
            },
            {
              "code": "120111",
              "name": "西青区"
            },
            {
              "code": "120112",
              "name": "津南区"
            },
            {
              "code": "120113",
              "name": "北辰区"
            },
            {
              "code": "120114",
              "name": "武清区"
            },
            {
              "code": "120115",
              "name": "宝坻区"
            },
            {
              "code": "120116",
              "name": "滨海新区"
            },
            {
              "code": "120121",
              "name": "宁河县"
            },
            {
              "code": "120123",
              "name": "静海县"
            },
            {
              "code": "120125",
              "name": "蓟县"
            }
          ]
        }
      ]
    }
  ]