vue所有UI库通用)tree-select 下拉多选(设置 maxTagPlaceholder 隐藏 tag 时显示的内容,支持鼠标悬浮展示更多

如果可以实现记得点赞分享,谢谢老铁~

1.需求描述

引用的下拉树形结构支持多选,限制选中tag的个数,且超过制定个数,鼠标悬浮展示更多已选中。

2.先看下效果图

在这里插入图片描述

3.实现思路

首先根据API文档,先设置maxTagCount,最多显示多少个 tag。
然后再设置 maxTagPlaceholder,隐藏 tag 时显示的内容,因为支持
插槽,所以我们可以这样自定义:

父组件

<a-tree-selectstyle="width: 100%"v-model:value="searchValue"tree-checkableallow-clearshow-search:tree-data="treeData"placeholder="请选择":max-tag-text-length="maxTagTextLength":max-tag-count="maxTagCount" ><template #maxTagPlaceholder><tool-tip-tag:currentCheckedKeys="dealCheckedList(treeData, searchValue)"></tool-tip-tag></template></a-tree-select><script lang="ts">
import { toRefs, watch, ref } from "vue";
export default {setup(porps) {const searchValue = ref<string[]>([]);// 关键: 过滤选中的label - valueconst dealCheckedList = (treeData, list) => {let dataList = treeToList(treeData);return [...new Set(dataList)].filter((item: any) =>list.includes(item.value));};return { dealCheckedList,searchValue };},
};
</script>

4.自定义一个toolTipTag 浮层组件

通过父传子 currentCheckedKeys 进行过滤选中的label展示名称。
子组件

<template><a-tooltip:overlayStyle="{overflow: 'auto',maxHeight: '750px',width: '300px',}"><template #title><div class="item" v-for="(item, i) in checkedList" :key="i"><div>{{ item?.title }}</div></div></template><span>{{ expandText }}</span></a-tooltip>
</template><script lang="ts">
import { toRefs, watch, ref } from "vue";
export default {name: "ToolTipTag",props: {currentCheckedKeys: Array,expandText: {type: String,default: () => "+ 更多 ...",},},setup(porps) {let { currentCheckedKeys } = toRefs(porps);let checkedList = ref<any>(currentCheckedKeys.value);watch(() => currentCheckedKeys.value,(val) => {checkedList.value = currentCheckedKeys.value;});return { checkedList };},
};
</script>

收工!谢谢老铁们的点赞收藏~

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

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

相关文章

【Docker】Docker network之bridge、host、none、container以及自定义网络的详细讲解

&#x1f680;欢迎来到本文&#x1f680; &#x1f349;个人简介&#xff1a;陈童学哦&#xff0c;目前学习C/C、算法、Python、Java等方向&#xff0c;一个正在慢慢前行的普通人。 &#x1f3c0;系列专栏&#xff1a;陈童学的日记 &#x1f4a1;其他专栏&#xff1a;CSTL&…

TCP/IP网络江湖初探:物理层的奥秘与传承(物理层上篇-基础与本质)

〇、引言 在这个数字时代,计算机网络如同广袤的江湖,数据在其中畅游,信息传递成为了生活的常态。然而,在这个充满虚拟奇观的网络江湖中,隐藏着一个不容忽视的存在,那就是物理层,这个江湖的基石。就如同江湖中的土地一样,物理层作为计算机网络的基础,承载着数据的最初转…

STM32 CubeMX (uart_IAP串口)简单示例

STM32 CubeMX STM32 CubeMX &#xff08;串口IAP&#xff09; STM32 CubeMXIAP有什么用&#xff1f;整体思路 一、STM32 CubeMX 设置时钟树UART使能UART初始化设置 二、代码部分文件移植![在这里插入图片描述](https://img-blog.csdnimg.cn/0c4841d8328b4169a8833f15fe3d670c.p…

PHP Smarty中的缓存如何实现?

欢迎来到PHP Smarty的缓存世界&#xff01;这里是一个简单的指南&#xff0c;帮助你理解如何在这个强大的模板引擎中启用和配置缓存。 首先&#xff0c;让我们先了解一下什么是缓存。简单来说&#xff0c;缓存就是将需要花费大量时间处理的数据或资源存储起来&#xff0c;以便…

2023/8/16总结

这几天完成了私信的功能点&#xff0c;用websocket做的。 这是大概的界面&#xff0c;参考的是微信 用户可以搜索好友&#xff1a; 如果不存在是下面这样&#xff0c;存在就会在左边的聊天里面显示有这个人选项 发送消息 接下来需要把推荐算法给做了

文件IO编程 1 2

头文件包含路径 linux 操作系统分为两大空间&#xff1a;用户空间和内核空间 这样划分&#xff0c;是为了保护内核的核心组件&#xff0c;不被轻易访问和修改 系统调用&#xff1a;安全的访问内核空间 其核心是&#xff1a;函数API&#xff08;API&#xff1a;用户编程接口&…

svn文章五:问题排查与修复 - 出了问题怎么办?SVN故障排除与修复指南

文章五&#xff1a;问题排查与修复 - “出了问题怎么办&#xff1f;SVN故障排除与修复指南” 概述&#xff1a;在使用SVN时&#xff0c;难免会遇到一些问题和错误。在这篇文章中&#xff0c;我们将教您如何进行故障排查和修复&#xff0c;保护您的SVN仓库和数据安全。 1. 引言…

K8S系列文章之 Docker安装使用Kafka

通过Docker拉取镜像的方式进行安装 照例先去DockerHub找一下镜像源&#xff0c;看下官方提供的基本操作&#xff08;大部分时候官方教程比网上的要清晰一些&#xff0c;并且大部分教程可能也是翻译的官方的操作步骤&#xff0c;所以直接看官方的就行&#xff09; 老实说Kafka…

“深入剖析JVM内部原理:解密Java虚拟机的奥秘“

标题&#xff1a;深入剖析JVM内部原理&#xff1a;解密Java虚拟机的奥秘 摘要&#xff1a;本文将深入探讨Java虚拟机&#xff08;JVM&#xff09;的内部原理&#xff0c;包括其架构、内存管理、垃圾回收机制、即时编译器等关键组成部分。通过解密JVM的奥秘&#xff0c;我们将更…

【Vue3】Vue3 UI 框架 | Element Plus —— 创建并优化表单

安装 # NPM $ npm install element-plus --save // 或者&#xff08;下载慢切换国内镜像&#xff09; $ npm install element-plus -S// 可以选择性安装 less npm install less less-loader -D // 可以选择性配置 自动联想src目录Element Plus 的引入和注入 main.ts import…

解决VSCode CPU高占问题的方法

如果你也遇到VSCode的CPU占用过高的问题&#xff0c;可以尝试使用官方自带的插件Bisect&#xff08;扩展二分查找&#xff09;功能来查找具体是哪个扩展出了问题。 找到“糟糕”的扩展可能很容易&#xff0c;也可能很困难。 打开扩展视图 ( CtrlShiftX )&#xff0c;禁用扩展&…

网络:杂记

1. 完成链路认证后&#xff0c;STA会继续发起链路服务协商&#xff0c;具体的协商是通过Association报文实现。 2. RSTP可以提高收敛速度的原因&#xff1a; RSTP的拓扑变化机制 Proposal/Agreement机制 根端口快速切换机制 边缘端口的引入

git cherry-pick

cherry-pick命令的基本用法 对于多分支的代码库&#xff0c;将代码从一个分支转移到另一个分支是常见需求。这时分两种情况。一种情况是&#xff0c;你需要另一个分支的所有代码变动&#xff0c;那么就采用合并&#xff08; git merge &#xff09;。另一种情况是&#xff0c;…

总结 TCP 协议的相关特性

TCP协议段格式: 如图, 端口号: 是其中一个重要的部分,知道端口号才能确认数据交给哪个应用程序(端口号属于传输层的概念). 4位首部长度:4bit表示的范围是0->15,在此处,单位是"4字节",因此,将这里的数值 * 4&#xff0c;才是真正的报头长度,即TCP 报头最大长度,60…

Cenos7 搭建Minio最新版集群部署服务器(一)

------> 道 | 法 | 术 | 器 | 势 <------ 多台服务器间免密登录|免密拷贝 Cenos7 搭建Minio集群部署服务器(一) Cenos7 搭建Minio集群Nginx统一访问入口|反向动态代理(二) Spring Boot 与Minio整合实现文件上传与下载(三) CentOS7的journalctl日志查看方法 …

已知四个坐标点,怎样求出四边形的四个内角

1&#xff0c;理论 最简单的方式利用向量进行求解 如图可得&#xff1a; cosθa*b/&#xff08;|a|*|b|&#xff09; 已知三点坐标&#xff0c;很容易可以得到两向量之积a*b&#xff0c;以及每个的模值 2&#xff0c;四个角度求解过程 首先&#xff0c;我们定义了四个坐标点…

在数字游民天堂,Polkadot Hubs 探索建设更紧密的全球社区

分布式办公是 Web3 行业的协作常态&#xff0c;当数字游民们享受着线上远程工作的自由和便捷时&#xff0c;也在怀念着一种面对面与他人交流与共创的经历。共享空间随之兴起&#xff0c;为许多初创项目公司提供开放舒适的环境&#xff0c;却难以在不同的人群之间搭起一张巨大的…

系统架构设计师考试大纲(2017年)

1.考试目标 考试合格人员应能够根据系统需求规格说明书,结合应用领域和技术发展的实际情况,考虑有关约束条件,设计正确、合理的软件架构,确保系统架构具有良好的特性;能够对项目系统架构进行描述、分析、设计与评估;能够按照相关标准编写相应的设计文档;能够与系统分析师…

完美解决Github提交PR后报错:File is not gofumpt-ed (gofumpt)

问题阐述 最近在Github上提交PR后&#xff0c;遇到了这么一个问题&#xff1a;golangci-lint运行失败&#xff0c;具体原因是File is not gofumpt-ed (gofumpt)。 名词解释 golangci-lint&#xff1a; golangci-lint 是Go语言社区中常用的代码质量检查工具&#xff0c;它可以…

react中使用shouldComponentUpdate生命周期函数调用setState引起的无限循环的错误

场景&#xff1a; 在 React 组件中&#xff0c;当在 componentWillUpdate 或 componentDidUpdate 生命周期方法中调用 setState 时&#xff0c;会触发无限循环&#xff0c;导致超过最大更新深度。 错误原因 在React组件中 &#xff0c;我们使用componentWillUpdate 或 componen…