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

何时使用

需要从一组相关联的数据集合进行选择，例如省市区，公司层级，事物分类等。
从一个较大的数据集合中进行选择时，用多级分类进行分隔，方便选择。
比起 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',
          },
        ],
      },
    ],
  }
]

vue3示例：

<script setup>
import {ref} from "vue";

const value = ref("")
const options = [
  {
    value: "浙江",
    label: "浙江",
    children:[
      {
        value: "杭州",
        label: "杭州",
        children: [
          {
            value: "西湖",
            label: "西湖",
          }
        ]
      }
    ]
  }
]

</script>
<template>
  <div class="p-8 bg-indigo-50 text-center">
    <a-cascader v-model:value="value" :options="options" placeholder="请选择"/>
  </div>
</template>

案例：移入展开

通过移入展开下级菜单，点击完成选择。

核心代码：

<template>
  <a-cascader
    v-model:value="value"
    :options="options"
    expand-trigger="hover"
    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>

如何实现：expand-trigger="hover"

vue3示例：

<script setup>
import {ref} from "vue";
import axios from "axios";

const value = ref("")
const options = ref([])
axios.get('http://localhost:8888/city/areas2')
    .then(function (response) {
      // 处理成功情况
      console.log(response);
      const data = response.data
      console.log("后端的数据：", data)
      const areas = data.data
      console.log("城市区县数据：", areas)
      options.value = areas
    })
    .catch(function (error) {
      // 处理错误情况
      console.log(error);
    })
    .finally(function () {
      // 总是会执行
    });
</script>
<template>
  <div class="p-8 bg-indigo-50 text-center">
    <a-cascader
        v-model:value="value"
        :options="options"
        placeholder="请选择"
        expand-trigger="hover"
    />
  </div>
</template>

案例：搜索

可以直接搜索选项并选择。

核心代码：

<template>
  <a-cascader
    v-model:value="value"
    :options="options"
    :show-search="{ filter }"
    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: 'xiasha',
            label: 'Xia Sha',
            disabled: true,
          },
        ],
      },
    ],
  },
  {
    value: 'jiangsu',
    label: 'Jiangsu',
    children: [
      {
        value: 'nanjing',
        label: 'Nanjing',
        children: [
          {
            value: 'zhonghuamen',
            label: 'Zhong Hua men',
          },
        ],
      },
    ],
  },
];
const filter = (inputValue, path) => {
  return path.some(option => option.label.toLowerCase().indexOf(inputValue.toLowerCase()) > -1);
};
const value = ref([]);
</script>

第一步：添加搜索功能

:show-search="{ filter }"

第二步：编写搜索方法

const filter = (inputValue, path) => {
  return path.some(option => option.label.toLowerCase().indexOf(inputValue.toLowerCase()) > -1);
};

属性

showSearch 属性

事件