Vue2仿淘宝实现省市区三级联动

三级联动，随着越来越多的审美，出现了很多种，好多公司都仿着淘宝的三级联动 ，好看时尚，so我们公司也一样……为了贴代码方便，我把写在data里面省市区的json独立了出来，下载贴进去即可用，链接如下：(这个直接是个data，放入你的vue2项目中即可。（因为我的项目是用的vue2，所以，其他的属性跟博客内容是吻合的。请配合博客再下载此json）)。

首先页面显示如下：

然后我们县级所在地区会出现三级联动，如下：（以下是片段，背景色未截取）

这个张什么样，以什么形式出现，取决于贵公司的ui需求，我们公司是做成弹出层了。。然后背景色透明，这里为了节省流量，我只截取了一段，最后显示如下：

如果贵公司也跟我们需求一样，希望这个可以帮到你们。下面是在vue2项目中写的三级联动代码以及css样式：
<template>

  <section class="myaddress">
    <section>
      <section class="cont" @click="choseadd()">
       <section>
         <span>所在地区：{{province?province:''}} {{city?city:''}} {{district?district:''}}</span>
       </section>
       <img src="../../assets/main/right.png" alt="">
       <div style="clear: both"></div>
      </section>
    </section>
    <!-- 居住地址三级联动选项 -->
    <section class="showchose" v-show="showchose">
     <section class="address">
      <section class="title">
       <h4>居住地址</h4>
       <span @click="closeadd()">×</span>
      </section>
      <section class="title">
       <div class="area" @click="provinceselected()">
         {{province?province:info[province-1].name}}
       </div>
       <div class="area" @click="cityselected()" :class="city?'':'active'">
         {{city?city:'请选择'}}
       </div>
       <div class="area" @click="districtselected()" :class="district?'':'active'" v-show="city">
         {{district?district:'请选择'}}
       </div>
      </section>
      <ul>
        <li class="addlist" v-for="(v,k) in info" 
          @click="getprovinceid(v.id, v.name, k)" 
          v-show="showprovince" 
          :class="v.selected ? 'active' : ''">{{v.name}}</li>
        <li class="addlist" v-for="(v,k) in showcitylist" 
          @click="getcityid(v.id, v.name, k)" 
          v-show="showcity" 
          :class="v.selected ? 'active' : ''">{{v.name}}</li>
        <li class="addlist" v-for="(v,k) in showdistrictlist" 
          @click="getdistrictid(v.id, v.name, k)" 
          v-show="showdistrict" 
          :class="v.selected ? 'active' : ''">{{v.name}}</li>
       </ul>
     </section>
    </section>
    <!-- 页面内容 -->
    <section class="cont">
      <span>详细地址：</span>
      <input type="text" v-model="address" placeholder=" 请填写详细地址">
    </section>
  </section>
</template>
<script>
  import {
      mapactions,
      mapgetters
  } from 'vuex';
  import api from './../../fetch/api.js'
  export default {
    name: 'address',
    data(){},此处的data直接下载json复制进去即可。http://download.csdn.net/detail/zhaohaixin0418/9862255。
    components: {
      mineheader
    },
    computed: {
        ...mapgetters([
          'bccontextpathsrc',
          'sessionid',
          'token',
        ]),
  },
  methods: {
    choseadd: function() {
      this.showchose = true;
    },
    closeadd: function() {
      this.showchose = false;
    },
    _filter(add, name, code) {
      let result = [];
      for (let i = 0; i < add.length; i++) {
        if (code == add[i].id) {
          result = add[i][name];
        }
      }
      return result;
    },
    getprovinceid: function(code, input, index) {
      this.province = code;
      this.province = input;
      this.showprovince = false;
      this.showcity = true;
      this.showdistrict = false;
      this.showcitylist = this._filter(this.info, 'city', this.province);
      // 点击选择当前
      this.info.map(a => a.selected = false);
      this.info[index].selected = true;
      this.areaprovince = input;
    },
    provinceselected: function() {
      // 清除市级和区级列表
      this.showcitylist = false;
      this.showdistrictlist = false;
      // 清除市级和区级选项
      this.city = false;
      this.district = false;
      // 选项页面的切换
      this.showprovince = true;
      this.showcity = false;
      this.showdistrict = false;
    },
    getcityid: function(code, input, index) {
      this.city = code;
      this.city = input;
      this.showprovince = false;
      this.showcity = false;
      this.showdistrict = true;
      this.showdistrictlist = this._filter(this.showcitylist, 'district', this.city);
      // 选择当前添加active
      this.showcitylist.map(a => a.selected = false);
      this.showcitylist[index].selected = true;
      this.areacity = input;
    },
    cityselected: function() {
      this.showprovince = false;
      this.showcity = true;
      this.showdistrict = false;
    },
    getdistrictid: function(code, input, index) {
      this.district = code;
      this.district = input;
      // 选择当前添加active
      this.showdistrictlist.map(a => a.selected = false);
      this.showdistrictlist[index].selected = true;
      // 选取市区选项之后关闭弹层
      this.showchose = false;
      this.areadistrict = input;
    },
    districtselected: function() {
      this.showprovince = false;
      this.showcity = false;
      this.showdistrict = true;
    },
    saveprofile: function() {
      api.commonapi('后台接口', 这里是贵公司后台接口，按照你们公司的改了就好
          'param_key={"head":{"type":"add_upd_info",' +
          '"session_id":"' + this.sessionid + '",' +
          '"token":"' + this.token + '","device_id":""},' +
          '"param":{"province":"' + this.areaprovince + '", ' +
          '"city":"' + this.areacity + '", "county":"' + this.areadistrict + '",' +
          '"address": "' + this.address + '"}}')
          .then(res => {
        console.log(res.data);
    });
    }
  }
  }
</script>
<style scoped>
  .myaddress {
    width: 100%;
    background-color: white;
    border-top: 4px solid rgba(245, 245, 245, 1);
    color: #333;
  }
  .myaddress .cont {
    border-bottom: 1px solid rgba(245, 245, 245, 0.8);
  }
  .myaddress .cont span {
    display: inline-block;
    font-size: 0.28rem;
    color: #333;
    line-height: 0.88rem;
    margin-left: 0.32rem;
  }
  .myaddress .cont section {
    float: left;
  }
  .myaddress .cont img {
    float: right;
    width: 0.14rem;
    height: 0.24rem;
    margin: 0.32rem 0.32rem 0.32rem 0;
  }
  .showchose {
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 120;
    background: rgba(77, 82, 113, 0.8);
  }
  .address {
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: 121;
    background: #fff;
    width: 100%;
  }
  .title h4 {
    display: inline-block;
    margin-left: 3.2rem;
    font-size: 0.32rem;
    line-height: 0.88rem;
    font-weight: normal;
    color: #999;
  }
  .title span {
    margin: 0.42rem 0 0 2.2rem;
    font-size: 0.45rem;
    line-height: 0.34rem;
    color: #d8d8d8;
  }
  .area {
    display: inline-block;
    font-size: 0.24rem;
    line-height: 0.88rem;
    margin-left: 0.42rem;
    color: #333;
  }
  .addlist {
    padding-left: 0.32rem;
    font-size: 0.34rem;
    line-height: 0.88rem;
    color: #333;
  }
  /* 修改的格式 */
  .address ul {
    height: 100%;
    margin-left: 5%;
    max-height: 4.4rem;
    overflow: auto;
  }
  .address .title .active {
    color: #0071b8;
    border-bottom: 0.02rem solid #0071b8;
  }
  .address ul .active {
    color: #0071b8;
  }
</style>

这样就完成了一个省市区的三级联动。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。