使用vue elementUI设置省市县三级联动的下拉列表框

在Vue中使用Element UI创建省市县三级联动的下拉列表框，你可以使用el-select组件来实现。首先，你需要准备好省市县的数据。

<template>
  <div>
    <el-select v-model="selectedProvince" placeholder="请选择省份" @change="handleProvinceChange">
      <el-option
        v-for="province in provinces"
        :key="province.value"
        :label="province.label"
        :value="province.value">
      </el-option>
    </el-select>
 
    <el-select v-model="selectedCity" placeholder="请选择城市" @change="handleCityChange">
      <el-option
        v-for="city in cities"
        :key="city.value"
        :label="city.label"
        :value="city.value">
      </el-option>
    </el-select>
 
    <el-select v-model="selectedCounty" placeholder="请选择区/县">
      <el-option
        v-for="county in counties"
        :key="county.value"
        :label="county.label"
        :value="county.value">
      </el-option>
    </el-select>
  </div>
</template>
 
<script>
export default {
  data() {
    return {
      selectedProvince: '',
      selectedCity: '',
      selectedCounty: '',
      provinces: [
        // 填充省份数据
      ],
      cities: [],
      counties: []
    };
  },
  methods: {
    handleProvinceChange(value) {
      // 根据省份value筛选出对应的城市数据
      this.cities = this.provinces.find(province => province.value === value).cities;
      this.selectedCity = '';
      this.selectedCounty = '';
    },
    handleCityChange(value) {
      // 根据城市value筛选出对应的区/县数据
      this.counties = this.cities.find(city => city.value === value).counties;
      this.selectedCounty = '';
    }
  }
};
</script>

在这个例子中，provinces 数组包含了省份的数据，每个省份对象包含value和label属性，以及一个cities数组。同理，cities数组包含了城市的数据，每个城市对象包含value和label属性，以及一个counties数组。你需要根据实际的省市县数据来填充这些数组。

这个例子中的省市县数据应该是一个嵌套结构，每个省份下面包含城市列表，每个城市下面包含区/县列表。在handleProvinceChange和handleCityChange方法中，我们根据选中的省份或城市更新对应的下级列表。