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-cascaderv-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.dataconsole.log("后端的数据:", data)const areas = data.dataconsole.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-cascaderv-model:value="value":options="options"placeholder="请选择"expand-trigger="hover"/></div>
</template>

在这里插入图片描述

案例:搜索

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

核心代码:

<template><a-cascaderv-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);
};

属性

参数说明类型默认值Version
allowClear是否支持清除booleantrue
autofocus自动获取焦点booleanfalse
bordered是否有边框booleantrue3.2
clearIcon自定义的选择框清空图标slot-3.2
changeOnSelect(单选时生效)当此项为 true 时,点选每级菜单选项值都会发生变化,具体见上面的演示booleanfalse
defaultValue默认的选中项string[] | number[][]
disabled禁用booleanfalse
displayRender选择后展示的渲染函数,可使用 #displayRender=“{labels, selectedOptions}”({labels, selectedOptions}) => VNodelabels => labels.join(' / ')
popupClassName自定义浮层类名string-4.0
dropdownStyle自定义浮层样式CSSProperties{}3.0
expandIcon自定义次级菜单展开图标slot-3.0
expandTrigger次级菜单的展开方式clickhover‘click’
fieldNames自定义 options 中 label value children 的字段object{ label: 'label', value: 'value', children: 'children' }
getPopupContainer菜单渲染父节点。默认渲染到 body 上,如果你遇到菜单滚动定位问题,试试修改为滚动的区域,并相对其定位。Function(triggerNode)() => document.body
loadData用于动态加载选项,无法与 showSearch 一起使用(selectedOptions) => void-
maxTagCount最多显示多少个 tag,响应式模式会对性能产生损耗number | responsive-3.0
maxTagPlaceholder隐藏 tag 时显示的内容v-slot | function(omittedValues)-3.0
multiple支持多选节点boolean-3.0
notFoundContent当下拉列表为空时显示的内容string | slot‘Not Found’
open控制浮层显隐boolean-3.0
options可选项数据源Option[]-
placeholder输入框占位文本string‘请选择’
placement浮层预设位置bottomLeftbottomRighttopLeft
showCheckedStrategy定义选中项回填的方式。Cascader.SHOW_CHILD: 只显示选中的子节点。Cascader.SHOW_PARENT: 只显示父节点(当父节点下所有子节点都选中时)。Cascader.SHOW_PARENTCascader.SHOW_CHILDCascader.SHOW_PARENT
removeIcon自定义的多选框清除图标slot-3.2
searchValue设置搜索的值,需要与 showSearch 配合使用string-3.0
showSearch在选择框中显示搜索框boolean | objectfalse
status设置校验状态‘error’ | ‘warning’-3.3.0
size输入框大小largedefaultsmall
suffixIcon自定义的选择框后缀图标string | VNode | slot-
tagRender自定义 tag 内容,多选时生效slot-3.0
value(v-model)指定选中项string[] | number[]-

showSearch 属性

参数说明类型默认值
filter接收 inputValue path 两个参数,当 path 符合筛选条件时,应返回 true,反之则返回 false。function(inputValue, path): boolean
limit搜索结果展示数量number | false50
matchInputWidth搜索结果列表是否与输入框同宽boolean
render用于渲染 filter 后的选项,可使用 #showSearchRender=“{inputValue, path}”function({inputValue, path}): VNode
sort用于排序 filter 后的选项function(a, b, inputValue)

事件

事件名称说明回调参数版本
change选择完成后的回调(value, selectedOptions) => void-
dropdownVisibleChange显示/隐藏浮层的回调(value) => void-3.0
search监听搜索,返回输入的值(value) => void-3.0

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/pingmian/26605.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

聊聊C/S模式架构的优缺点

C/S模式架构&#xff0c;即客户端-服务器&#xff08;Client/Server&#xff09;架构&#xff0c;是一种常见的软件系统架构&#xff0c;以下是C/S模式架构的优缺点分析。 C/S架构优点部分&#xff1a; 性能高效&#xff1a;由于客户端直接与服务器进行数据交换&#xff0c;没…

关于创建Cloudeflare的r2桶以及如何使用rclone连接

一、名词解释 r2桶是cloudflare给用户的免费10G储存空间&#xff0c;可与自定义域创建链接的储存storge。 rclone是开源工具&#xff0c;用于在本地通过软件链接云储存storege&#xff0c;让用户可以修改、同步、删除云储存中的内容。 rcloneBrowser是rclone的GUI版本&#x…

足底筋膜炎怎样才能彻底治愈

这里写自定义目录标题 欢迎使用Markdown编辑器新的改变功能快捷键合理的创建标题&#xff0c;有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants 创建一个自定义列表如何创建一个…

4.MongoDB sharding Cluster 分片集群

MongoDB分片集群的介绍&#xff1a; 是MongoDB提供的一种可水平扩展的数据存储解决方案。 当单个MongoDB服务器无法满足数据存储需求或吞吐量要求时&#xff0c;可以使用分片集群来分散数据量和查询负载。分片集群的结构组成&#xff1a; 1.分片&#xff08;shards&#xff09;…

windows中安装libreOffice最新版本24.2.4

windows中安装libreOffice最新版本24.2.4 一. 介绍二. 安装过程2.1 下载 LibreOffice2.2 安装过程2.3 页面展示 三. 参考文档 前言 这是我在这个网站整理的笔记,有错误的地方请指出&#xff0c;关注我&#xff0c;接下来还会持续更新。 作者&#xff1a;神的孩子都在歌唱 一. 介…

易基因:【表观遗传学基础】如何研究DNA甲基化

大家好&#xff0c;这里是专注表观组学十余年&#xff0c;领跑多组学科研服务的易基因。 表观遗传学近几年取得的一系列研究进展&#xff0c;确实吸引着越来越多的关注&#xff01;为了帮大伙儿梳理一下表观遗传学的基本概念和研究方法&#xff0c;小编打算开一个系列专题&…

VBA实现关闭Excel自动计算,关闭屏幕刷新

Excel代码提速神器 涉及到提取表格大量数据操作&#xff0c;复制粘贴多个单元格时&#xff0c;尽量避免一个个单元格提取&#xff0c;或者一行行一列列提取数值&#xff0c;设计大量IO流操作非常浪费时间。尽量找出数据之间的规律&#xff0c;批量选中复制粘贴&#xff0c;找到…

第五十一天 | 1143.最长公共子序列

题目&#xff1a;1143.最长公共子序列718.最长重复子数组的区别是&#xff0c;子序列不要求连续&#xff0c;子数组要求连续。这一差异体现在dp数组含义和递推公式中&#xff0c;本题是子序列&#xff0c;那就要考虑上nums1[i - 1] ! nums2[j - 1]的情况。 本道题与 1.dp数组…

2024年你需要了解的仅有的10种防检测浏览器

在不断发展的互联网隐私和安全领域&#xff0c;要保持领先地位就必须使用最先进的工具和方法&#xff0c;包括VPN、密码管理器、防病毒软件、防火墙、广告拦截器等。在这些安全措施中&#xff0c;反侦测浏览器占有独特的地位&#xff0c;因为它们通过掩盖用户的数字足迹来增强网…

inBuilder 低代码平台新特性推荐 - 第二十一期

今天给大家带来的是inBuilder低代码平台新特性推荐第二十一期——inBuilder单点登录链接生成器 一、场景介绍 在系统间的集成对接过程中&#xff0c;普遍存在通过单点登录链接进入系统的场景。比如通过单点登录链接进入流程工作台&#xff0c;进入用户管理等功能。inBuilder单…

单点登录分析介绍

文章目录 1、单点登录解决方案1.1、后端保存登录状态1.2、token模式 2、user服务-登录接口2.1、UserController2.2、UserInfoServiceImpl2.3、载荷2.4、响应2.5、Redis Desktop Manager 1、单点登录解决方案 多个系统只有一个登录服务 1.1、后端保存登录状态 1.2、token模式 …

pdf书签怎么做?这三款软件轻松驾驭文档!

在数字化时代&#xff0c;PDF文件已成为我们工作、学习中的重要组成部分。然而&#xff0c;面对海量的PDF内容&#xff0c;如何快速定位关键信息&#xff0c;提高阅读效率呢&#xff1f;答案就是——制作PDF书签。今天&#xff0c;我将为大家介绍三款实用的软件&#xff0c;助你…

LangChain 与 Elastic 合作为 RAG 添加向量数据库和语义重排序

作者&#xff1a;来自 Elastic Max Jakob 在过去的一年中&#xff0c;我们看到了生成式人工智能领域的许多进展。许多新服务和库应运而生。LangChain 已成为使用大型语言模型 (LLM) 构建应用程序的最受欢迎的库&#xff0c;例如检索增强生成 (RAG) 系统。该库使原型设计和试验不…

大数据学习——安装hive

一. 安装准备 1. 打开虚拟机&#xff0c;启动配置了NameNode节点的虚拟机&#xff08;一般和mysql在同一台虚拟机&#xff09;并连接shell 二. 安装 1. 上传hive安装包 hive安装包 提取码&#xff1a;6666 切换到/opt/install_packages目录下 可以将之前解压的rpm文件删除…

C语言调用so/dll动态库

文章目录 windows系统linux系统windows 与 linux下 C 调用动态库的差异 C语言调用动态链接库 windows系统 windows系统下&#xff0c;C语言调用win下的动态库dll&#xff0c;使用头文件<windows.h>。 准备基础C代码 lauf.c #include <stdio.h>// 定义函数&#x…

算法课程笔记——线段树维护矩阵

算法课程笔记——线段树维护矩阵 2

前后端知识点汇总

springboot项目启动 springboot集成naocs和redis springboot集成mybatis springboot集成mybatisPlus 集成rabbitMq 集成sa-token satoken介绍 sa-token官网Sa-Token 是一个轻量级 Java 权限认证框架,主要解决:登录认证、权限认证、单点登录、OAuth2.0、分布式Session会…

【stm32】基于I2C协议的OLED显示(利用U82G库)

【stm32】基于I2C协议的OLED显示&#xff08;利用U82G库&#xff09; 一、实验目的二、探究任务三、原理探究3.1 I2C接口3.1.1 概述3.1.2 主要特点3.1.3 功能描述3.1.4 从模式3.1.5 主模式3.1.6 时序协议 3.2 OLED屏3.2.1 工作原理3.2.2 汉字点阵显示原理3.2.3 汉字点阵取模 四…

【后端开发】服务开发场景之高性能(CDN与负载均衡,数据库优化,消息队列)

【后端开发】服务开发场景之高性能&#xff08;CDN与负载均衡&#xff0c;数据库优化&#xff0c;消息队列&#xff09; 文章目录 1、内容分发网络&#xff08;CDN &#xff09; & 负载均衡算法CDN是什么&#xff1f;&#xff08;静态资源加速&#xff09;CDN的应用场景&am…

OV5647与树莓派bullseye 64bit的兼容性问题

OV5647与树莓派bullseye 64bit的兼容性问题 1. 源由2. 问题3. 分析方法一&#xff1a;使用 pyudev 库方法二&#xff1a;使用 v4l2-ctl 工具方法三&#xff1a;直接读取 /dev 目录方法四&#xff1a;使用 OpenCV方法五&#xff1a;使用 Picamera方法六&#xff1a;使用 libcame…