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

在Vue.js中结合Ant Design库实现省市县三级联动选择器，你可以使用`<cascader>`组件。以下是一个详细的步骤和代码示例：

首先，确保已安装了Vue和Ant Design库，如果你还没有安装，可以使用npm或yarn进行安装：

# 使用npm
npm install vue ant-design-vue

# 或者使用yarn
yarn add vue ant-design-vue

然后，在你的项目中创建一个新的Vue组件，例如`CitySelector.vue`:

<template>
  <div>
    <a-cascader
      :options="options"
      placeholder="请选择地区"
      v-model="selectedValue"
      @change="handleChange"
    ></a-cascader>
    <p>您选择了: {{ selectedValue.join(' > ') }}</p>
  </div>
</template>

<script setup>
import { Cascader } from 'ant-design-vue';

// 初始化数据
const options = [
  {
    value: '',
    label: '中国',
    children: [
      // 省份数据
      { value: 'sh', label: '上海', children: [{ value: '001', label: '区一' }, { value: '002', label: '区二' }] },
      // 其他省份...
    ],
  },
  // 城市数据...
];

// 当用户选择地区时触发的函数
function handleChange(value) {
  console.log('省级联动选择:', value);
}

// 当前选中的值
let selectedValue = [];
</script>

在这个例子中，我们创建了一个`<a-cascader>`组件，并设置其`options`属性为一个嵌套的数组，每个层级代表一级联动的选择。当用户点击下拉框中的选项时，会触发`handleChange`函数，更新`selectedValue`。