省市区三级分类分开下拉选择框

第一步: 安装插件

npm i element-china-area-data@5.0.2 -S

第二步: 省市区三级分类组件代码:

<template>
  <div class="city-container">
    <span class="title">省市区:span>
    <el-select class="pro-city-arear" v-model="province" placeholder="请选择" @change="mainSelectChange(province)" clearable>
      <el-option
        v-for="item in arearOptions"
        :key="item.label"
        :label="item.label"
        :value="item.value"
        >
      el-option>
    el-select>
    <span class="line">-span>
    <el-select class="pro-city-arear" v-model="city" placeholder="请选择" @change="subSelectChange(city)" :disabled="isSubDisabled" clearable>
      <el-option
        v-for="subItem in subArearOptions"
        :key="subItem.id"
        :label="subItem.label"
        :value="subItem.value"
      >el-option>
    el-select>
    <span class="line">-span>
    <el-select class="pro-city-arear" v-model="area" placeholder="请选择" @change="subSonSelectChange(area)" :disabled="isSubSonDisabled" clearable>
      <el-option
        v-for="subSonItem in subSonArearOptions"
        :key="subSonItem.value"
        :label="subSonItem.label"
        :value="subSonItem.value"
      >el-option>
    el-select>
  div>
template>

<script>
// 导入省市区三级联动数据
import { regionDataPlus } from 'element-china-area-data'
export default {
  name: 'City',
  components: {
    
  },
  // 组件参数 接收来自父组件的数据
  props: {

  },
  data () {
    return {
      arearOptions: regionDataPlus,
      subArearOptions: [],
      subSonArearOptions: [],
      province: '全部',
      city: '全部',
      area: '全部',
      // 商业街配置数据
      index: 0,
      subIndex: 0,
      subSonIndex: 0,
      // 是否可点击
      isSubDisabled: false,
      isSubSonDisabled: false,
    }
  },
  computed: {
    
  },
  watch: {
    province (newProvince, oldProvince) {
      if (newProvince !== oldProvince) {
        this.city = '全部'
        this.area = '全部'
        this.subArearOptions = this.arearOptions[this.index].children
        this.$emit('changeProvince',newProvince)
        this.$emit('changeCity','全部')
        this.$emit('changeArea','全部')
      }
    },
    city (newCity, oldCity) {
      if (newCity !== oldCity) {
        this.area = '全部'
        this.$emit('changeCity',newCity)
        this.$emit('changeArea','全部')
      }
    },
    area (newArea, oldArea) {
      if (newArea !== oldArea){
        this.$emit('changeArea',newArea)
      }
    }
  },
  methods: {
    // // 商业街
    // 省市区一级多选框
    mainSelectChange (value) {
      try {
        if (value === '') {
          this.province = '全部'
          this.city = '全部'
          this.isSubDisabled = true
          this.area = '全部'
          this.isSubSonDisabled = true
        } else {
          this.isSubDisabled = false
          this.isSubSonDisabled = false
          this.arearOptions.forEach((item, index) => {
            if (item.value === value) {
              this.index = index
              this.province = item.label
              return
            }
          })
          this.subArearOptions = this.arearOptions[this.index].children
          this.subSonArearOptions = []
        }
      } catch (error) {
        console.log(error, '省市区一级分类发生错误')
      }
    },
    // 省市区二级级多选框
    subSelectChange (value) {
      try {
        if (value === '') {
          this.city = '全部'
          this.area = '全部'
          this.isSubSonDisabled = true
        } else {
          this.isSubSonDisabled = false
          this.subArearOptions.forEach((item, subIndex) => {
            if (item.value === value) {
              this.subIndex = subIndex
              this.city = item.label
              return
            }
          })
          this.subSonArearOptions = this.subArearOptions[this.subIndex].children
        }
      } catch (error) {
        console.log(error, '省市区二级分类发生错误')
      }
      
    },
    // 省市区三级多选框
    subSonSelectChange (value) {
      try {
        if (value === '') {
          this.area = '全部'
        } else {
          this.subSonArearOptions.forEach((item, subSonIndex) => {
            if (item.value === value) {
              this.subSonIndex = subSonIndex
              this.area = item.label
            }
          })
        }
      } catch (error) {
        console.log(error, '省市区三级分类发生错误')
      }
    },
  }
}
</script>

<style scoped lang="less">
	// css
  .city-container {
    display: inline-block;
    .title {
      margin-right: 10px;
      font-size: 16px;
    }
    .pro-city-arear {
      width: 180px;
      height: 40px;
    }
    .line {
      margin: 0 10px;
    }
  }
style>

第三步: 在父组件中的代码:

```html
<template>
  <div class="orderdetails-container">
    <!-- 省市区三级分类组件 -->
    <city 
      @changeProvince="(value) => {
        this.province = value
      }"
      @changeCity="(value) => {
        this.city = value
      }"
      @changeArea="(value) => {
        this.area = value
      }">
    </city>
  </div>
</template>

<script>
// 导入省市区组件
import City from '../City.vue'
export default {
  components: {
    City,
  },
  data () {
    return {
      // 省市区组件数据
      province: '',//省
      city: '',//市
      area: '',//区
    }
  }
}
</script>