Vue中h5三個下拉框實現省級聯動

使用element-UI插件：（我這里是后台返回的省市區數據，不包含海外）

首先看頁面效果：

<template>
  <div class="allBox">
   <div ref="main">
    <p class="title">請選擇您所在的區域</p>
       <el-select v-model="province_id" placeholder="請選擇省" class="ipt" @change="getCityList(province_id)">
                <el-option
                  v-for="item in provincOptions"
                  :key="item.id"
                  :label="item.area_name"
                  :value="item.id">
                </el-option>
        </el-select>
        <el-select v-model="city_id" placeholder="請選擇市" class="ipt" @change="getCountyList(city_id)">
                <el-option
                  v-for="item in cityOptions"
                  :key="item.id"
                  :label="item.area_name"
                  :value="item.id">
                </el-option>
        </el-select>
        <el-select v-model="county_id" placeholder="請選擇區" class="ipt">
                <el-option
                  v-for="item in countyOptions"
                  :key="item.id"
                  :label="item.area_name"
                  :value="item.id">
                </el-option>
        </el-select>
   </div>
    <van-button class="nextStepBtn" :disabled="isDisabledSubmitBtn" @click="submitArea">下一步</van-button>
  </div>
</template>

<script>
  import {
    getCity,
    queryArea,
    editArea
  } from "../industry"; // 引入接口（注意文件路徑）
  export default {
    data() {
      return {
        isDisabledSubmitBtn:false,
        province_id: '',
        province_name: '',
        city_id: '',
        city_name: '',
        county_id: '',
        county_name: '',
        provincOptions:[],
        cityOptions:[],
        countyOptions:[],
        selectArea:null
      };
    },
    created() {
      this.getArea()
    },
    methods: {
    // 獲取省市區（數據回顯）
    getArea() {
      let params={
        unionid:this.unionid
      }
      queryArea(params).then(res => {
        this.selectArea = res.data;
        this.getProvinceList(0)
        this.province_id = this.selectArea.provinceId
        this.province_name = this.selectArea.provinceName
        this.getCityList(this.province_id)
        this.city_id=this.selectArea.cityId
        this.city_name=this.selectArea.cityName
        this.getCountyList(this.city_id)
        this.county_id=this.selectArea.countyId
        this.county_name=this.selectArea.countyName
      })
    },
    //提交前的數據校驗
    valid() {
      let that=this
      if (!that.province_id) {
        that.$toast({
          message: '請選擇省',
          duration: 2000
        });
        return false;
      }
       if (!that.city_id) {
        that.$toast({
          message: '請選擇市',
          duration: 2000
        });
        return false;
      }
       if (!that.county_id && this.countyOptions.length >= 1) {
        that.$toast({
          message: '請選擇區',
          duration: 2000
        });
        return false;
      }
      return true;
    },
    // 獲取省列表
    getProvinceList() {
      let params={
        parentId:0
      }
      getCity(params).then(res => {
        this.provincOptions = res.data
      })
    },
    // 獲取市列表
    getCityList(province_id) {
      this.city_id=''
　　　　this.city_name=''
      this.county_id=''
　　　　this.county_name=''
      this.countyOptions=[]
      let params={
        parentId:this.province_id
      }
      if (this.province_id) {
        getCity(params).then(res => {
          this.cityOptions = res.data
        })
      } else {
        this.cityOptions = [] // 每一次選擇新的省之后清空，防止錯亂
      }
    },
    // 獲取區列表
    getCountyList(city_id) {
      let params={
        parentId:this.city_id
      }
      this.county_id = ''
　　　　this.county_name=''
        if (this.city_id) {
          getCity(params).then(res => {
            this.countyOptions = res.data
          })
        } else {
          this.countyOptions = [] // 每一次選擇新的省之后清空，防止錯亂
        }
    },
　　// 提交數據
    submitArea(){
      if(this.valid()){
        this.isDisabledSubmitBtn=true // 按鈕置灰，防止用戶不斷點擊
　　　　　// 循環得到省市區名字
        for(var i = 0;i<this.provincOptions.length;i++){
          if(this.province_id == this.provincOptions[i].id){
            this.province_name = this.provincOptions[i].area_name
          }
        }
        for(var i = 0;i<this.cityOptions.length;i++){
          if(this.city_id == this.cityOptions[i].id){
            this.city_name = this.cityOptions[i].area_name
          }
        }
        for(var i = 0;i<this.countyOptions.length;i++){
          if(this.county_id == this.countyOptions[i].id){
            this.county_name = this.countyOptions[i].area_name
          }
        }
        let params={
          provinceId:this.province_id,
          provinceName:this.province_name,
          cityId:this.city_id,
          cityName:this.city_name,
          countyId:this.county_id,
          countyName:this.county_name // 傳入后台所需要的參數
        }
        editArea(params).then(res=>{
          if(res.code==1){
            // 提交成功后的操作
          }else{
            this.isDisabledSubmitBtn=false // 按鈕恢復高亮
            this.$toast({
              message: res.message,
              duration: 2000
            });
          }
        })
      }
    }
    }
  };
</script>
<style>
.el-scrollbar__bar {
  opacity: 1 !important;
}
</style>

// 樣式僅供參考

<style scoped> .allBox { width: 100%; height: 100%; background-size: 100% 100%; min-height: 100%; background-attachment: fixed; overflow-y: auto; 　　background-color: #097Caa; } .main { width: 100%; } .title { font-size: 20px; font-weight: 450; margin: 30px auto 50px; text-align: center; color: #fff; } .ipt { border-radius: 5px; width: 70%; margin-top: 10px; } .nextStepBtn { width: 70%; height: 44px; border-radius: 4px; margin: 60px auto 20px; color: #fff; font-size: 16px; border: 0; background-color: #11415F; } </style>

 

接口industry.js文件：

//查詢省市區
export const getCity = (params={}) => {
  return request({
    url:'后台接口',
    method: 'post',
    params: params
  })
}
//獲取省市區
export const queryArea = (params={}) => {
  return request({
    url:'后台接口',
    method: 'post',
    params: params
  })
}
//提交省市區
export const editArea = (params={}) => {
  return request({
    url:'后台接口',
    method: 'post',
    params: params
  })
}