vue+antdesign组件 实现省市县下拉框三级联动，写一个demo

Vue.js 结合 Ant Design 组件实现省市县三级联动的下拉框通常涉及数据绑定、事件监听以及嵌套的组件使用。这里是一个简单的 Vue 配合 Element UI (Ant Design 的 Vue 版本) 的示例代码：

<template>
  <div>
    <el-form-item label="省份">
      <el-select v-model="province" placeholder="请选择省份">
        <el-option
          v-for="item in provinces"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        ></el-option>
      </el-select>
    </el-form-item>
    
    <el-form-item label="城市">
      <el-select v-model="city" placeholder="请选择城市">
        <el-option
          v-for="item in cities"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        ></el-option>
      </el-select>
    </el-form-item>
    
    <el-form-item label="区县">
      <el-select v-model="district" placeholder="请选择区县">
        <el-option
          v-for="item in districts"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        ></el-option>
      </el-select>
    </el-form-item>
  </div>
</template>

<script>
export default {
  data() {
    return {
      province: '',
      city: '',
      districts: [],
      provinces: [
        { value: '01', label: '省份一' },
        { value: '02', label: '省份二' },
        // 更多省略...
      ],
      cities: [], // 这里会根据province值动态填充
    };
  },
  mounted() {
    this.getCityList(this.province); // 获取城市列表
  },
  methods: {
    getCityList(provinceValue) {
      if (!provinceValue) return;
      // 假设我们有一个接口获取指定省份的城市列表，可以使用axios等库
      axios.get(`/api/cities/${provinceValue}`).then((response) => {
        this.cities = response.data; // 更新城市选项
      });
    }
  },
};
</script>

在这个例子中，当用户选择了一个省份时，`getCityList` 方法会被调用，从服务器获取该省份对应的城市列表，并更新 `cities` 数据。然后城市下拉框就会显示相应的城市选项。

注意这只是一个基础的示例，实际应用可能需要处理更复杂的情况，例如错误处理、缓存、异步加载等等。此外，这个例子假设你已经安装了 Element UI 并配置好了路由。如果你使用的是 Ant Design，那么需要替换 `el-` 开头的标签为 `a-` 开头的。