Python私教张大鹏 Vue3整合AntDesignVue之Cascader 级联选择

本文链接：https://blog.csdn.net/qq_37703224/article/details/139627451

何时使用

需要从一组相关联的数据集合进行选择，例如省市区，公司层级，事物分类等。
从一个较大的数据集合中进行选择时，用多级分类进行分隔，方便选择。
比起 Select 组件，可以在同一个浮层中完成选择，有较好的体验。

案例：省市区级联

核心代码：

<template>
  <a-cascader v-model:value="value" :options="options" placeholder="Please select" />
</template>
<script setup>
import {
     
      ref } from 'vue';
const options = [
  {
     
     
    value: 'zhejiang',
    label: 'Zhejiang',
    children: [
      {
     
     
        value: 'hangzhou',
        label: 'Hangzhou',
        children: [
          {
     
     
            value: 'xihu',
            label: 'West Lake',
          },
        ],
      },
    ],
  },
  {
     
     
    value: 'jiangsu',
    label: 'Jiangsu',
    children: [
      {
     
     
        value: 'nanjing',
        label: 'Nanjing',
        children: [
          {
     
     
            value: 'zhonghuamen',
            label: 'Zhong Hua Men',
          },
        ],
      },
    ],
  },
];
const value = ref([]);
</script>

第一步：使用组件

<a-cascader v-model:value="value" :options="options" placeholder="Please select" />

第二步：定义options

value：真实的值
label：显示的标签
children：级联选择，下级

const options = [
  {
   
   
    value: 'zhejiang',
    label: 'Zhejiang',
    children: [
      {
   
   
        value: 'hangzhou',
        label: 'Hangzhou',
        children: [
          {
   
   
            value: 'xihu',
            label: 'West Lake',
          },