vue3 AntdVue 省市区三级下拉框

AntdVue是Vue.js生态中集成Ant Design UI组件库的一个方案，它提供了一种简单的方式来在Vue项目中使用Ant Design的设计和功能。其中，涉及到省市区三级联动的下拉框通常指的是`<Select>`组件结合`<Option>`和嵌套`<Select>`来实现的地区选择功能。

在AntdVue中，你可以这样做：

1. 首先，导入需要的组件：

import { Select } from 'ant-design-vue';

2. 创建一个数据结构来存储地区数据，通常包含父级、子级和值：

const provinces = [
  // ... 填充省份数据
];

const cities = []; // 子级城市数据，会根据provinceId动态加载

const districts = []; // 子级区县数据，会根据cityId动态加载

// 初始化下拉选项
const options = [
  {
    key: '',
    label: '--请选择--',
    children: [],
  },
].concat(provinces);

3. 使用`v-model`绑定当前选中的地区数据，并在`on-change`事件中处理层级切换：

<Select v-model="selectedRegion" @change="handleRegionChange">
  <Option :key="item.key" :value="item.value" v-for="(item, index) in options" :label="item.label">
    {{ item.label }}
    <template #children>
      <Select v-if="item.children.length" :placeholder="--请选择--" @change="handleCityChange">
        <Option v-for="subItem in item.children" :key="subItem.key" :value="subItem.value">{{ subItem.label }}</Option>
      </Select>
    </template>
  </Option>
</Select>

4. 定义`handleRegionChange`和`handleCityChange`函数，分别负责切换省级、市级下拉框的显示和保存选择的数据。