当前位置: 首页 > news >正文

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>

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

相关文章:

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

如果可以实现记得点赞分享&#xff0c;谢谢老铁&#xff5e; 1.需求描述 引用的下拉树形结构支持多选&#xff0c;限制选中tag的个数&#xff0c;且超过制定个数&#xff0c;鼠标悬浮展示更多已选中。 2.先看下效果图 3.实现思路 首先根据API文档&#xff0c;先设置maxTagC…...

进行 200 瓦太阳能 (PV) 模块设计以测量太阳能光伏阵列的电压、电流和功率、综合负荷频率和电压控制系统的方法研究(Simulink实现)

&#x1f4a5;&#x1f4a5;&#x1f49e;&#x1f49e;欢迎来到本博客❤️❤️&#x1f4a5;&#x1f4a5; &#x1f3c6;博主优势&#xff1a;&#x1f31e;&#x1f31e;&#x1f31e;博客内容尽量做到思维缜密&#xff0c;逻辑清晰&#xff0c;为了方便读者。 ⛳️座右铭&a…...

实战:工作中对并发问题的处理 | 京东物流技术团队

1. 问题背景 问题发生在快递分拣的流程中&#xff0c;我尽可能将业务背景简化&#xff0c;让大家只关注并发问题本身。 分拣业务针对每个快递包裹都会生成一个任务&#xff0c;我们称它为 task。task 中有两个字段需要关注&#xff0c;一个是分拣中发生的异常&#xff08;exp…...

解决VSCode CPU高占问题的方法

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

tensorflow 1.x和3090、cuda部署

这里写目录标题 3090、cuda和tensorflow 1.x 3090、cuda和tensorflow 1.x 因为3090只支持cuda11.0的版本&#xff0c;而tensorflow1.已经不再维护&#xff0c;没有出支持cuda11.0的版本了。 nvidia提供了TF1.x对RTX 3090、cuda11等新硬件的支持。卸载已有的tensorflow-gpu包和…...

vue-photo-preview( 照片预览功能 )

安装 npm install vue-photo-preview --save 引入项目 import preview from vue-photo-preview import vue-photo-preview/dist/skin.csslet options {fullscreenEl: false //是否可以全屏预览 }; Vue.use(preview, options)如果不写options 和 Vue.use(preview,options)&…...

Angular 独立组件入门

Angular 独立组件入门 如果你正在学习 Angular&#xff0c;那么你可能已经听说过独立组件&#xff08;Component&#xff09;。顾名思义&#xff0c;独立组件就是可以独立使用和管理的组件&#xff0c;它们能够被包含在其他组件中或被其他组件引用。 在本文中&#xff0c;我们…...

Lie group 专题:Lie 群

Lie group 专题&#xff1a;Lie 群 流形 流形的定义 一个m维流形是满足以下条件的集合M&#xff1a;存在可数多个称为坐标卡&#xff08;图集&#xff09;的子集合族.以及映到的连通开子集上的一对一映射&#xff0c;,称为局部坐标映射&#xff0c;满足以下条件 坐标卡覆盖M…...

Vue-打印组件页面

场景: 需要将页面的局部信息打印出来&#xff0c;只在前端实现&#xff0c;不要占用后端的资源。经过百度经验&#xff0c;决定使用 print-js和html2canvas组件。 1. 下载包 npm install print-js --save npm install --save html2canvas 2. 组件内引用 <script>impo…...

Python爬虫——scrapy_基本使用

安装scrapy pip install scrapy创建scrapy项目&#xff0c;需要在终端里创建 注意&#xff1a;项目的名字开头不能是数字&#xff0c;也不能包含中文 scrapy startproject 项目名称 示例&#xff1a; scrapy startproject scra_baidu_36创建好后的文件 3. 创建爬虫文件&…...

30 | 中国高校数据分析

一、数据源 本项目使用了两个csv的数据文件,一个是中国高校(大学)的数据,一个是中国高校专业设置的数据 数据基本栏位:高校(大学)的数据高校专业设置的数据学校学校省份专业类别城市专业名称地址国家特色专业水平层次办学类别办学类型985211双一流二、数据分析目标 本…...

开源低代码平台Openblocks

网友 HankMeng 想看低代码工具&#xff0c;正好手上有一个&#xff1b; 什么是 Openblocks &#xff1f; Openblocks 是一个开发人员友好的开源低代码平台&#xff0c;可在几分钟内构建内部应用程序。 传统上&#xff0c;构建内部应用程序需要复杂的前端和后端交互&#xff0c;…...

每日汇评:黄金在 200 日移动平均线附近似乎很脆弱,关注美国零售销售

1、金价预计将巩固其近期跌势&#xff0c;至 6 月初以来的最低水平&#xff1b; 2、对美联储再次加息的押注继续限制了贵金属的上涨&#xff1b; 3、金融市场现在期待美国零售销售报告带来一些有意义的推动&#xff1b; 周二金价难以获得任何有意义的牵引力&#xff0c;并在…...

DFT笔记 DC/AC mode与Func

DFT scan可以分为DC和AC两种&#xff0c;区别如下图 DC模式需要ate测试机台提供test clock时钟&#xff08;最快100M&#xff09;&#xff0c;DFT工程师需要升级普通reg变成带si和so&#xff0c;se pin的reg&#xff0c;并插入扫描链&#xff08;scan chain&#xff09;&#x…...

docker核心操作

docker核心操作 1、docker安装(1)可选参数:(2)输出参数解释:2、docker镜像(1)拉取镜像:[https://www.docker.com/](https://www.docker.com/)3、运行docker镜像(1) 运行容器:(2) 挂载硬盘:4、docker容器的生命周期5.1、进入容器内部5.2、怎么解决Error: exec fai…...

《电路》基础知识入门学习笔记

文章目录&#xff1a; 一&#xff1a;电路模型和电路规律 1.电路概述 2.电路模型 3.基本电路物理量&#xff1a;电流、电压、电功率和能量 4.电流和电压的参考方向 5.电路元件—电阻 6. 电路元件—电压源和电流源 7.受控电源 8.基尔霍夫&#xff08;后面都要用这个方法…...

什么是P2P?

P2P (Peer-to-Peer) 是一种分布式的网络架构&#xff0c;其中各个节点&#xff08;通常被称为“peers”或“节点”&#xff09;直接进行数据共享和交换&#xff0c;而无需依赖中央服务器。P2P 网络强调平等的参与和共享&#xff0c;每个节点既可以是数据的消费者&#xff08;下…...

matlab RANSAC拟合多项式曲线

目录 一、功能概述1、算法概述2、主要函数3、参考文献二、代码实现三、结果展示四、参考链接本文由CSDN点云侠原创,原文链接。爬虫网站自重,把自己当个人。爬些不完整的误导别人有意思吗???? 一、功能概述 1、算法概述 使用RANSAC对点进行多项式拟合。...

微信小程序nfc指令异常记录

小程序nfc相关代码: readEvent(){wx.getNFCAdapter().startDiscovery({success:(res)>{console.log(--------------start--------)console.log(res);wx.getNFCAdapter().onDiscovered(callback>{console.log(------------onDiscovered----------)console.log(callback)…...

10 - 把间隔的几个commit整理成1个

查看所有文章链接&#xff1a;&#xff08;更新中&#xff09;GIT常用场景- 目录 文章目录 把间隔的几个commit整理成1个 把间隔的几个commit整理成1个...

多云管理“拦路虎”:深入解析网络互联、身份同步与成本可视化的技术复杂度​

一、引言&#xff1a;多云环境的技术复杂性本质​​ 企业采用多云策略已从技术选型升维至生存刚需。当业务系统分散部署在多个云平台时&#xff0c;​​基础设施的技术债呈现指数级积累​​。网络连接、身份认证、成本管理这三大核心挑战相互嵌套&#xff1a;跨云网络构建数据…...

React第五十七节 Router中RouterProvider使用详解及注意事项

前言 在 React Router v6.4 中&#xff0c;RouterProvider 是一个核心组件&#xff0c;用于提供基于数据路由&#xff08;data routers&#xff09;的新型路由方案。 它替代了传统的 <BrowserRouter>&#xff0c;支持更强大的数据加载和操作功能&#xff08;如 loader 和…...

PHP和Node.js哪个更爽?

先说结论&#xff0c;rust完胜。 php&#xff1a;laravel&#xff0c;swoole&#xff0c;webman&#xff0c;最开始在苏宁的时候写了几年php&#xff0c;当时觉得php真的是世界上最好的语言&#xff0c;因为当初活在舒适圈里&#xff0c;不愿意跳出来&#xff0c;就好比当初活在…...

JavaScript 中的 ES|QL:利用 Apache Arrow 工具

作者&#xff1a;来自 Elastic Jeffrey Rengifo 学习如何将 ES|QL 与 JavaScript 的 Apache Arrow 客户端工具一起使用。 想获得 Elastic 认证吗&#xff1f;了解下一期 Elasticsearch Engineer 培训的时间吧&#xff01; Elasticsearch 拥有众多新功能&#xff0c;助你为自己…...

在rocky linux 9.5上在线安装 docker

前面是指南&#xff0c;后面是日志 sudo dnf config-manager --add-repo https://download.docker.com/linux/centos/docker-ce.repo sudo dnf install docker-ce docker-ce-cli containerd.io -y docker version sudo systemctl start docker sudo systemctl status docker …...

04-初识css

一、css样式引入 1.1.内部样式 <div style"width: 100px;"></div>1.2.外部样式 1.2.1.外部样式1 <style>.aa {width: 100px;} </style> <div class"aa"></div>1.2.2.外部样式2 <!-- rel内表面引入的是style样…...

QT: `long long` 类型转换为 `QString` 2025.6.5

在 Qt 中&#xff0c;将 long long 类型转换为 QString 可以通过以下两种常用方法实现&#xff1a; 方法 1&#xff1a;使用 QString::number() 直接调用 QString 的静态方法 number()&#xff0c;将数值转换为字符串&#xff1a; long long value 1234567890123456789LL; …...

Spring数据访问模块设计

前面我们已经完成了IoC和web模块的设计&#xff0c;聪明的码友立马就知道了&#xff0c;该到数据访问模块了&#xff0c;要不就这俩玩个6啊&#xff0c;查库势在必行&#xff0c;至此&#xff0c;它来了。 一、核心设计理念 1、痛点在哪 应用离不开数据&#xff08;数据库、No…...

【生成模型】视频生成论文调研

工作清单 上游应用方向&#xff1a;控制、速度、时长、高动态、多主体驱动 类型工作基础模型WAN / WAN-VACE / HunyuanVideo控制条件轨迹控制ATI~镜头控制ReCamMaster~多主体驱动Phantom~音频驱动Let Them Talk: Audio-Driven Multi-Person Conversational Video Generation速…...

网站指纹识别

网站指纹识别 网站的最基本组成&#xff1a;服务器&#xff08;操作系统&#xff09;、中间件&#xff08;web容器&#xff09;、脚本语言、数据厍 为什么要了解这些&#xff1f;举个例子&#xff1a;发现了一个文件读取漏洞&#xff0c;我们需要读/etc/passwd&#xff0c;如…...