vue element三级联动，省市区镇切换

主要思路

需要实现,回显和编辑

回显:

1.从接口拿到 [省，市，区，镇] 的数据，

2. 在select组件上绑定对应的值

3. 需要监听 [市，区，镇],来触发对应'市,区,镇'接口,用来回显数据

如果市值存在，获取市的数据

如果区值存在，获取区的数据

如果镇值存在，获取镇的数据

编辑:

1. 在省，市，区组件上绑定事件

2.触发省事件，清空 市，区，镇， 获取市的数据

3.触发市事件，清空 区，镇， 获取区的数据

4.触发区事件，清空 镇， 获取镇的数据

<template>
  <div>
    <el-select v-model="value[0]" placeholder="省" @change="getAreaListCityByPid()" class="w-self">
      <el-option v-for="item in provinceData" :key="item.id" :label="item.name" :value="item.id">
      </el-option>
    </el-select>
    <el-select v-model="value[1]" placeholder="市" @change="getAreaListCountyByPid()" class="w-self">
      <el-option v-for="item in cityData" :key="item.id" :label="item.name" :value="item.id">
      </el-option>
    </el-select>
    <el-select v-model="value[2]" placeholder="区" @change="getAreaListTownByPid()" class="w-self">
      <el-option v-for="item in countyData" :key="item.id" :label="item.name" :value="item.id">
      </el-option>
    </el-select>
    <el-select v-model="value[3]" placeholder="镇" class="w-self">
      <el-option v-for="item in townData" :key="item.id" :label="item.name" :value="item.id">
      </el-option>
    </el-select>
  </div>
</template>

<script>
import { getAreaListProvince, getAreaListCityByPid, getAreaListCountyByPid, getAreaListTownByPid } from '@/axios/standardizationAlliance/systemManage'
export default {
  data () {
    return {
      provinceData: [], // 省
      cityData: [], // 市
      countyData: [], // 区
      townData: [] // 街道
    }
  },
  model: {
    prop: 'value',
    event: 'getValue'
  },
  props: {
    // 父组件传的数据
    value: {
      default: () => []
    }
  },
 mounted () {
    // 获取省
    this.getAreaListProvince()
  },
  watch: {
    value: {
      deep: true,
      handler (val) {
        if (val[1]) {
          // 如果市的值存在，获取市的数据
          this.getAreaListCityByPidData()
        }
        if (val[2]) {
          // 如果区的值存在，获取区的数据
          this.getAreaListCountyByPidData()
        }
        if (val[3]) {
          // 如果镇的值存在，获取镇的数据
          this.getAreaListTownByPidData()
        }
      },
    },
  },
  methods: {
    // 获取省的数据
    async getAreaListProvince () {
      const res = await getAreaListProvince()
      if (res.code === 200) {
        this.provinceData = res.data
      }
    },
    // 切换省
    getAreaListCityByPid () {
      // 清空 市，区，镇
      this.value.splice(1)
      this.getAreaListCityByPidData()
    },
    // 获取市的数据
    async getAreaListCityByPidData () {
      const params = this.value[0] ? this.value[0] : ''
      const res = await getAreaListCityByPid(params)
      if (res.code === 200) {
        this.cityData = res.data
      }
    },
    // 切换市
    getAreaListCountyByPid () {
      // 清空 区，镇
      this.value.splice(2)
      this.getAreaListCountyByPidData()
    },
    // 获取区的数据
    async getAreaListCountyByPidData () {
      const params = this.value[1] ? this.value[1] : ''
      const res = await getAreaListCountyByPid(params)
      if (res.code === 200) {
        this.countyData = res.data
      }
    },
    // 切换区
    getAreaListTownByPid () {
      // 清空 镇
      this.value.splice(3)
      this.getAreaListTownByPidData()
    },
    // 获取镇的数据
    async getAreaListTownByPidData () {
      const params = this.value[2] ? this.value[2] : ''
      const res = await getAreaListTownByPid(params)
      if (res.code === 200) {
        this.townData = res.data
      }
    }
  }
}
</script>

<style lang="less" scoped>
.w-self {
  width: 100%;
  margin-bottom: 20px;
}
</style>