vue antd 实现下拉框三级联动

Vue Ant Design (简称 VueAD) 是将Ant Design（蚂蚁设计体系）集成到Vue.js框架中的组件库，它提供了一套丰富的UI组件，包括下拉框（Dropdown）等。要在Vue AD中实现下拉框的三级联动，通常会通过嵌套数据结构和`<el-cascader>`组件来完成。以下是一个简单的步骤说明：

1. **设置数据结构**：
创建一个包含层级信息的数据数组，例如：

   [
     {
       value: 'parent1',
       label: '父级1',
       children: [
         {
           value: 'child1',
           label: '子级1'
         },
         {
           value: 'child2',
           label: '子级2',
           children: [
             {
               value: 'grandChild1',
               label: '孙子级1'
             }
           ]
         }
       ]
     }
   ]

2. **使用Cascader组件**：
在Vue组件中导入`<el-cascader>`组件，并绑定数据源和一些配置选项：

   <template>
     <el-cascader
       :options="options"
       placeholder="请选择"
       @change="handleChange"
     ></el-cascader>
   </template>

   <script>
   import { Cascader } from "ant-design-vue";
   
   export default {
     components: {
       Cascader
     },
     data() {
       return {
         options: [], // 这里放之前设置的数据结构
       };
     },
     methods: {
       handleChange(value) {
         console.log('三级联动选择值:', value);
       }
     }
   };
   </script>

3. **初始化数据**：
初始化时从后台获取数据并填充到`options`属性。

4. **联动效果**：
当用户在一个级别的下拉框中选择了一个选项，其他级别的下拉框内容会动态更新，展示对应层级的选项。