Vue中使用el-select下拉框实现省、市、县地区三级联动功能，props传城市数据 和 回显的省市区code值，省市区用,分割，可以回显,选中的值可以用v-model 绑定 完整代码

好的，以下是一个简单的三级联动的Vue组件代码，使用了`el-select`组件实现：

<template>
  <div>
    <el-select v-model="selectedProvince" placeholder="请选择省份" @change="provinceChange">
      <el-option v-for="province in provinces" :key="province.code" :label="province.name" :value="province.code"></el-option>
    </el-select>
    <el-select v-if="selectedProvince" v-model="selectedCity" placeholder="请选择城市" @change="cityChange">
      <el-option v-for="city in cities" :key="city.code" :label="city.name" :value="city.code"></el-option>
    </el-select>
    <el-select v-if="selectedCity" v-model="selectedDistrict" placeholder="请选择区县">
      <el-option v-for="district in districts" :key="district.code" :label="district.name" :value="district.code"></el-option>
    </el-select>
  </div>
</template>

<script>
export default {
  props: {
    citiesData: {
      type: Array,
      required: true
    },
    selectedCode: {
      type: String,
      required: true
    }
  },
  data() {
    return {
      provinces: this.citiesData,
      cities: [],
      districts: [],
      selectedProvince: '',
      selectedCity: '',
      selectedDistrict: ''
    }
  },
  created() {
    // 初始化
    this.initSelectedCode()
  },
  methods: {
    initSelectedCode() {
      if (this.selectedCode) {
        const codes = this.selectedCode.split(',')
        if (codes.length === 3) {
          this.selectedProvince = codes[0]
          this.selectedCity = codes[1]
          this.selectedDistrict = codes[2]
          this.filterCities()
          this.filterDistricts()
        }
      }
    },
    provinceChange() {
      this.filterCities()
      this.selectedCity = ''
      this.selectedDistrict = ''
    },
    cityChange() {
      this.filterDistricts()
      this.selectedDistrict = ''
    },
    filterCities() {
      const province = this.provinces.find(item => item.code === this.selectedProvince)
      if (province) {
        this.cities = province.children
      }
    },
    filterDistricts() {
      const city = this.cities.find(item => item.code === this.selectedCity)
      if (city) {
        this.districts = city.children
      }
    }
  }
}
</script>

这个组件接收两个props：`citiesData`和`selectedCode`，分别对应城市数据和已选中的省市区code值。`citiesData`是一个数组，包含了所有省市区的信息；`selectedCode`是一个字符串，包含了已选中的省市区的code值，用逗号分割。例如："110000,110100,110101"。

在组件的data中定义了三个变量：`provinces`、`cities`和`districts`，分别对应省、市、区县的数据。还定义了三个变量：`selectedProvince`、`selectedCity`和`selectedDistrict`，用于绑定已选中的省市区值。

在组件的created生命周期函数中，初始化已选中的省市区值。

在组件的方法中，实现了省、市、区县三级联动的功能。每当省份或城市改变时，都会根据当前选中的值更新下一级的选项。`filterCities`和`filterDistricts`方法分别用于过滤城市和区县的数据。`provinceChange`和`cityChange`方法分别用于处理省份和城市选项的改变事件。

在模板中，使用了`v-if`指令判断当前是否有选中的省市区，如果有，则显示相应的`el-select`组件。`v-for`指令用于循环渲染省、市、区县选项。`@change`事件用于监听选项的改变事件，触发相应的方法进行下一级选项的更新。`v-model`指令用于绑定选中的值。

希望这个代码可以帮助到你。