vue三级联动select组件

有点小丑，样式自己调吧。复制即可用。

<template>
    <div class="th-sel">
      <div class="th-sel-title">地区</div>
      <div class="th-sel-inputs">
        <input type="text" placeholder="省" readonly v-model="province" @click="show('provinceBoxShow')">
        <input type="text" placeholder="市" readonly v-model="city" @click="show('cityBoxShow')">
        <input type="text" placeholder="区/县" readonly v-model="district" @click="show('districtBoxShow')">
      </div>
      <div class="th-sel-array">
        <div class="th-sel-array-province" v-if="provinceBoxShow">
          <ul>
            <li v-for="item in provinceBox" @click="chose('province',item)">{{item}}</li>
          </ul>
        </div>
        <div class="th-sel-array-city" v-if="cityBoxShow">
          <ul>
            <li v-for="item in cityBox" @click="chose('city',item)">{{item}}</li>
          </ul>
        </div>
        <div class="th-sel-array-district" v-if="districtBoxShow">
          <ul>
            <li v-for="item in districtBox" @click="chose('district',item)">{{item}}</li>
          </ul>
        </div>
      </div>
    </div>
</template>

<script>
export default {
  data() {
    return {
      province: '',
      provinceBox: ['湖北省','四川省','湖南省','河南省','广东省','江苏省'],
      provinceBoxShow: false,
      city: '',
      cityBox: '',
      cityBoxShow: false,
      district: '',
      districtBox: '',
      districtBoxShow: false
    }
  },
  methods:{
    chose(obj,val){
      switch (obj) {
        case 'province':
          this.province = val;
          this.provinceBoxShow = false;
          break;
        case 'city':
          this.city = val;
          this.cityBoxShow = false;
          break;
        case 'district':
          this.district = val;
          this.districtBoxShow = false;
          break;
      }
    },
    show(val){
      switch (val) {
        case 'provinceBoxShow':
          this.provinceBoxShow = true;
          this.cityBoxShow = false;
          this.districtBoxShow = false;
          break;
        case 'cityBoxShow':
          this.provinceBoxShow = false;
          this.cityBoxShow = true;
          this.districtBoxShow = false;
          break;
        case 'districtBoxShow':
          this.provinceBoxShow = false;
          this.cityBoxShow = false;
          this.districtBoxShow = true;
          break;
      }
    }

  },
  watch:{
    province:function () {
      this.cityBox = [];
      this.districtBox = [];
      this.city = '';
      this.district = '';
      switch (this.province)
      {
        case '湖北省':
          this.cityBox.push('武汉市');
          break;
        case '四川省':
          this.cityBox.push('成都市');
          break;
        case '湖南省':
          this.cityBox.push('长沙市');
          break;
        case '河南省':
          this.cityBox.push('洛阳市');
          break;
        case '广东省':
          this.cityBox.push('广州市');
          break;
        case '江苏省':
          this.cityBox.push('徐州市');
          break;
      }

    },
    city:function () {
      this.districtBox = [];
      this.district = '';
      switch (this.city) {
        case '成都市':
          this.districtBox.push('武侯区','锦江区','青羊区','金牛区','成华区','龙泉驿区','温江县','新都区','青白江区','双流县','郫县');
          break;
        case '武汉市':
          this.districtBox.push('江岸区','江汉区','硚口区','汉阳区','武昌区','洪山区','青山区');
          break;
        case '长沙市':
          this.districtBox.push('芙蓉区','天心区','岳麓区','开福区','雨花区','望城县');
          break;
        case '洛阳市':
          this.districtBox.push('涧西区','西工区','老城区','洛龙区','吉利区');
          break;
        case '广州市':
          this.districtBox.push('越秀区','海珠区','荔湾区','天河区','白云区','黄埔区','南沙区','番禺区','花都区','增城区','从化市');
          break;
        case '徐州市':
          this.districtBox.push('鼓楼区','云龙区','贾汪区','泉山区', '铜山县');
          break;
      }
    }
  }
 }
</script>

<style scoped lang="less">
*{
  padding: 0;
  margin: 0;
}
li{
  list-style: none;
}
.th-sel{
  display: flex;
  justify-content: space-between;
  &-title{
    width: 30%;
    text-align: center;
  }
  &-inputs{
    display: flex;
    justify-content: space-around;
    input{
      background-color: #fff;
      width: 25%;
    }
  }
  &-array{
    position: fixed;
    bottom: 0;
    width: 100%;
    max-height: 150px;
    overflow: scroll;
    li{
      text-align: center;
      width: 100%;
    }
  }
}
</style>