Vue中使用el-select下拉框实现省、市、县地区三级联动功能 .

<template>
  <el-form :model="form">
    <el-form-item label="省份">
      <el-select v-model="form.province" @change="handleProvinceChange">
        <el-option v-for="province in provinces" :key="province.value" :label="province.label" :value="province.value"></el-option>
      </el-select>
    </el-form-item>
    <el-form-item label="城市">
      <el-select v-model="form.city" @change="handleCityChange">
        <el-option v-for="city in cities" :key="city.value" :label="city.label" :value="city.value"></el-option>
      </el-select>
    </el-form-item>
    <el-form-item label="区县">
      <el-select v-model="form.county" @change="handleCountyChange">
        <el-option v-for="county in counties" :key="county.value" :label="county.label" :value="county.value"></el-option>
      </el-select>
    </el-form-item>
  </el-form>
</template>
 
<script>
export default {
  data() {
    return {
      form: {
        province: '',
        city: '',
        county: ''
      },
      provinces: [
        { label: '省份A', value: 'provinceA' },
        // ...更多省份
      ],
      cities: [], // 城市列表
      counties: [] // 区县列表
    };
  },
  methods: {
    handleProvinceChange(value) {
      // 根据省份value加载城市列表
      this.cities = this.getCitiesByProvince(value);
      this.form.city = ''; // 清空城市选择
      this.form.county = ''; // 清空区县选择
    },
    handleCityChange(value) {
      // 根据城市value加载区县列表
      this.counties = this.getCountiesByCity(value);
      this.form.county = ''; // 清空区县选择
    },
    // 模拟方法，应从后端接口获取真实数据
    getCitiesByProvince(provinceValue) {
      // 返回省份对应的城市列表
    },
    getCountiesByCity(cityValue) {
      // 返回城市对应的区县列表
    }
  }
};
</script>

这个代码实例提供了一个简化的Vue组件，用于实现省、市、县的三级联动下拉框。它使用了el-select和el-option组件来构建下拉框，并通过v-model进行数据双向绑定。当用户选择省份时，会通过handleProvinceChange方法更新城市列表；当用户选择城市时，会通过handleCityChange方法更新区县列表。这里的省份、城市和区县数据是模拟的，实际应用中应从后端接口获取真实数据。