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 时显示的内容,支持鼠标悬浮展示更多
如果可以实现记得点赞分享,谢谢老铁~ 1.需求描述 引用的下拉树形结构支持多选,限制选中tag的个数,且超过制定个数,鼠标悬浮展示更多已选中。 2.先看下效果图 3.实现思路 首先根据API文档,先设置maxTagC…...
进行 200 瓦太阳能 (PV) 模块设计以测量太阳能光伏阵列的电压、电流和功率、综合负荷频率和电压控制系统的方法研究(Simulink实现)
💥💥💞💞欢迎来到本博客❤️❤️💥💥 🏆博主优势:🌞🌞🌞博客内容尽量做到思维缜密,逻辑清晰,为了方便读者。 ⛳️座右铭&a…...
实战:工作中对并发问题的处理 | 京东物流技术团队
1. 问题背景 问题发生在快递分拣的流程中,我尽可能将业务背景简化,让大家只关注并发问题本身。 分拣业务针对每个快递包裹都会生成一个任务,我们称它为 task。task 中有两个字段需要关注,一个是分拣中发生的异常(exp…...
解决VSCode CPU高占问题的方法
如果你也遇到VSCode的CPU占用过高的问题,可以尝试使用官方自带的插件Bisect(扩展二分查找)功能来查找具体是哪个扩展出了问题。 找到“糟糕”的扩展可能很容易,也可能很困难。 打开扩展视图 ( CtrlShiftX ),禁用扩展&…...
tensorflow 1.x和3090、cuda部署
这里写目录标题 3090、cuda和tensorflow 1.x 3090、cuda和tensorflow 1.x 因为3090只支持cuda11.0的版本,而tensorflow1.已经不再维护,没有出支持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,那么你可能已经听说过独立组件(Component)。顾名思义,独立组件就是可以独立使用和管理的组件,它们能够被包含在其他组件中或被其他组件引用。 在本文中,我们…...
Lie group 专题:Lie 群
Lie group 专题:Lie 群 流形 流形的定义 一个m维流形是满足以下条件的集合M:存在可数多个称为坐标卡(图集)的子集合族.以及映到的连通开子集上的一对一映射,,称为局部坐标映射,满足以下条件 坐标卡覆盖M…...
Vue-打印组件页面
场景: 需要将页面的局部信息打印出来,只在前端实现,不要占用后端的资源。经过百度经验,决定使用 print-js和html2canvas组件。 1. 下载包 npm install print-js --save npm install --save html2canvas 2. 组件内引用 <script>impo…...
Python爬虫——scrapy_基本使用
安装scrapy pip install scrapy创建scrapy项目,需要在终端里创建 注意:项目的名字开头不能是数字,也不能包含中文 scrapy startproject 项目名称 示例: scrapy startproject scra_baidu_36创建好后的文件 3. 创建爬虫文件&…...
30 | 中国高校数据分析
一、数据源 本项目使用了两个csv的数据文件,一个是中国高校(大学)的数据,一个是中国高校专业设置的数据 数据基本栏位:高校(大学)的数据高校专业设置的数据学校学校省份专业类别城市专业名称地址国家特色专业水平层次办学类别办学类型985211双一流二、数据分析目标 本…...
开源低代码平台Openblocks
网友 HankMeng 想看低代码工具,正好手上有一个; 什么是 Openblocks ? Openblocks 是一个开发人员友好的开源低代码平台,可在几分钟内构建内部应用程序。 传统上,构建内部应用程序需要复杂的前端和后端交互,…...
每日汇评:黄金在 200 日移动平均线附近似乎很脆弱,关注美国零售销售
1、金价预计将巩固其近期跌势,至 6 月初以来的最低水平; 2、对美联储再次加息的押注继续限制了贵金属的上涨; 3、金融市场现在期待美国零售销售报告带来一些有意义的推动; 周二金价难以获得任何有意义的牵引力,并在…...
DFT笔记 DC/AC mode与Func
DFT scan可以分为DC和AC两种,区别如下图 DC模式需要ate测试机台提供test clock时钟(最快100M),DFT工程师需要升级普通reg变成带si和so,se pin的reg,并插入扫描链(scan chain)&#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…...
《电路》基础知识入门学习笔记
文章目录: 一:电路模型和电路规律 1.电路概述 2.电路模型 3.基本电路物理量:电流、电压、电功率和能量 4.电流和电压的参考方向 5.电路元件—电阻 6. 电路元件—电压源和电流源 7.受控电源 8.基尔霍夫(后面都要用这个方法…...
什么是P2P?
P2P (Peer-to-Peer) 是一种分布式的网络架构,其中各个节点(通常被称为“peers”或“节点”)直接进行数据共享和交换,而无需依赖中央服务器。P2P 网络强调平等的参与和共享,每个节点既可以是数据的消费者(下…...
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个
查看所有文章链接:(更新中)GIT常用场景- 目录 文章目录 把间隔的几个commit整理成1个 把间隔的几个commit整理成1个...
Java 8 Stream API 入门到实践详解
一、告别 for 循环! 传统痛点: Java 8 之前,集合操作离不开冗长的 for 循环和匿名类。例如,过滤列表中的偶数: List<Integer> list Arrays.asList(1, 2, 3, 4, 5); List<Integer> evens new ArrayList…...
UE5 学习系列(三)创建和移动物体
这篇博客是该系列的第三篇,是在之前两篇博客的基础上展开,主要介绍如何在操作界面中创建和拖动物体,这篇博客跟随的视频链接如下: B 站视频:s03-创建和移动物体 如果你不打算开之前的博客并且对UE5 比较熟的话按照以…...
聊聊 Pulsar:Producer 源码解析
一、前言 Apache Pulsar 是一个企业级的开源分布式消息传递平台,以其高性能、可扩展性和存储计算分离架构在消息队列和流处理领域独树一帜。在 Pulsar 的核心架构中,Producer(生产者) 是连接客户端应用与消息队列的第一步。生产者…...
蓝桥杯 2024 15届国赛 A组 儿童节快乐
P10576 [蓝桥杯 2024 国 A] 儿童节快乐 题目描述 五彩斑斓的气球在蓝天下悠然飘荡,轻快的音乐在耳边持续回荡,小朋友们手牵着手一同畅快欢笑。在这样一片安乐祥和的氛围下,六一来了。 今天是六一儿童节,小蓝老师为了让大家在节…...
质量体系的重要
质量体系是为确保产品、服务或过程质量满足规定要求,由相互关联的要素构成的有机整体。其核心内容可归纳为以下五个方面: 🏛️ 一、组织架构与职责 质量体系明确组织内各部门、岗位的职责与权限,形成层级清晰的管理网络…...
vue3 字体颜色设置的多种方式
在Vue 3中设置字体颜色可以通过多种方式实现,这取决于你是想在组件内部直接设置,还是在CSS/SCSS/LESS等样式文件中定义。以下是几种常见的方法: 1. 内联样式 你可以直接在模板中使用style绑定来设置字体颜色。 <template><div :s…...
【C++从零实现Json-Rpc框架】第六弹 —— 服务端模块划分
一、项目背景回顾 前五弹完成了Json-Rpc协议解析、请求处理、客户端调用等基础模块搭建。 本弹重点聚焦于服务端的模块划分与架构设计,提升代码结构的可维护性与扩展性。 二、服务端模块设计目标 高内聚低耦合:各模块职责清晰,便于独立开发…...
稳定币的深度剖析与展望
一、引言 在当今数字化浪潮席卷全球的时代,加密货币作为一种新兴的金融现象,正以前所未有的速度改变着我们对传统货币和金融体系的认知。然而,加密货币市场的高度波动性却成为了其广泛应用和普及的一大障碍。在这样的背景下,稳定…...
嵌入式学习笔记DAY33(网络编程——TCP)
一、网络架构 C/S (client/server 客户端/服务器):由客户端和服务器端两个部分组成。客户端通常是用户使用的应用程序,负责提供用户界面和交互逻辑 ,接收用户输入,向服务器发送请求,并展示服务…...
在Mathematica中实现Newton-Raphson迭代的收敛时间算法(一般三次多项式)
考察一般的三次多项式,以r为参数: p[z_, r_] : z^3 (r - 1) z - r; roots[r_] : z /. Solve[p[z, r] 0, z]; 此多项式的根为: 尽管看起来这个多项式是特殊的,其实一般的三次多项式都是可以通过线性变换化为这个形式…...
