el-select多选以tag展示时,超过显示长度以...省略号显示,且在一行展示

效果:

代码:

<span>系统词典维度:</span>
	<el-select
	  v-model="dNum"
	  placeholder="请选择"
	  multiple
	  collapse-tags //设置collapse-tags属性将它们合并为一段文字
	  size="small"
	  style="width:160px"
	  class="tags-select-input"
	>
	  <el-option
	    v-for="item in gainianOptions"
	    :key="item.uid"
	    :label="item.name"
	    :value="item.en"
	  ></el-option>
	</el-select>

css:

.tags-select-input /deep/ .el-select__tags {
  white-space: nowrap;
  overflow: hidden;
  flex-flow: nowrap;
   display:flex;
  flex-wrap:nowrap;
}
.tags-select-input /deep/ .el-select__tags-text {
  display: inline-block;
  max-width: 90px;//设置最大宽度 超出显示...
  white-space: nowrap;
  overflow: hidden;
  flex-flow: nowrap;
  vertical-align:bottom;
  text-overflow:ellipsis;
}

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

LabVIEW示波器连续触发编程

LabVIEW示波器连续触发编程 niScopeEX Fetch Forever范例利用了如何设置硬件和驱动的优点来进行连续采集。 当NI-SCOPE设备被设置为采集预触发扫描&#xff0c;设备上的板载内存被用作一个环形缓冲。这样&#xff0c;无论触发何时到来&#xff0c;设备都可以追踪和检索所有要求…

vs code 和 hbuilder 历史记录查询

一.Hbuilder 找到需要的文件右键 二. vs code

Linux操作系统中软件安装:用RPM包管理器安装软件步骤

安装软件的一般步骤如下&#xff1a; 1.打开终端&#xff0c;作为root用户或使用sudo命令获取管理员权限。 2.使用RPM命令进行软件包的安装。例如&#xff0c;使用“rpm -ivh 软件包名称.rpm”命令来安装软件包&#xff0c;其中“-i”表示安装&#xff0c;“-v”表示显示详细安…

centos7.9 postgresql 16.0 源码安装部署

postgresql 16.0 源码安装部署 环境准备 系统主机名IP地址centos7.9postgres192.168.200.56 软件准备 postgresql-16.0.tar.gz https://ftp.postgresql.org/pub/source/v16.0/postgresql-16.0.tar.gz依赖安装 yum -y install systemd-devel readline readline-devel zlib-devel…

数据可视化:动态柱状图

终于来到最后一个数据可视化的文章拿啦~~~ 在这里学习如何绘制动态柱状图 我先整个活 (๑′ᴗ‵๑)&#xff29; Lᵒᵛᵉᵧₒᵤ❤ 什么是pyecharts&#xff1f; 答&#xff1a; Python的Pyecharts软件包。它是一个用于Python数据可视化和图表绘制的库&#xff0c;可用于制作…

openGauss学习笔记-116 openGauss 数据库管理-设置数据库审计-审计概述

文章目录 openGauss学习笔记-116 openGauss 数据库管理-设置数据库审计-审计概述116.1 背景信息116.2 操作步骤 openGauss学习笔记-116 openGauss 数据库管理-设置数据库审计-审计概述 116.1 背景信息 数据库安全对数据库系统来说至关重要。openGauss将用户对数据库的所有操作…

一个高性能类型安全的.NET枚举实用开源库

从零构建.Net前后端分离项目 枚举应该是我们编程中&#xff0c;必不可少的了&#xff0c;今天推荐一个.NET枚举实用开源库&#xff0c;它提供许多方便的扩展方法&#xff0c;方便开发者使用开发。 01 项目简介 Enums.NET是一个.NET枚举实用程序库&#xff0c;专注于为枚举提…

Python如何解析json对象?

目录 一、JSON简介 二、Python的json模块 1. 加载JSON数据 2. 生成JSON数据 三、处理复杂的JSON数据 四、自定义JSON解析器 五、注意事项和最佳实践 六、总结 JSON&#xff08;JavaScript Object Notation&#xff09;作为一种轻量级的数据交换格式&#xff0c;在网络通…

【入门Flink】- 06Flink作业提交流程【待完善】

Standalone 会话模式作业提交流程 代码生成任务的过程&#xff1a; 逻辑流图&#xff08;StreamGraph&#xff09;→ 作业图&#xff08;JobGraph&#xff09;→ 执行图&#xff08;ExecutionGraph&#xff09;→物理图&#xff08;Physical Graph&#xff09;。 作业图算子链…

solidworks安装时,出现这个错误:无法获得下列许可SOLIDWORKS Standard.无效的(不一致的)使用许可号码。(-8,544,0)

问题描述&#xff1a;在安装SolidWorks2023时&#xff0c;按照软件管家中的步骤&#xff0c;但是在打开SolidWorks2023桌面上的快捷键时&#xff0c;出现了这个错误&#xff1a; 无法获得下列许可SOLIDWORKS Standard.无效的&#xff08;不一致的&#xff09;使用许可号码。(-…

最新Next 14快速上手基础部分

最新Next 14快速上手基础部分 最新的NEXT快速上手文档&#xff0c;2023.10.27 英文官网同步&#xff0c;版本Next14.0.0 本项目案例&#xff1a;GitHub地址&#xff0c;可以根据git回滚代码到对应知识&#xff0c;若有错误&#xff0c;欢迎指正&#xff01; 一、介绍 1.什么是…

克鲁斯卡尔算法

连通图中寻找最小生成树的常用算法有 2 种&#xff0c;分别是普里姆算法和克鲁斯卡尔算法。本节&#xff0c;我们将带您详细了解克鲁斯卡尔算法。 和普里姆算法类似&#xff0c;克鲁斯卡尔算法的实现过程也采用了贪心的策略&#xff1a;对于具有 n 个顶点的图&#xff0c;将图中…

竞赛选题 深度学习手势识别 - yolo python opencv cnn 机器视觉

文章目录 0 前言1 课题背景2 卷积神经网络2.1卷积层2.2 池化层2.3 激活函数2.4 全连接层2.5 使用tensorflow中keras模块实现卷积神经网络 3 YOLOV53.1 网络架构图3.2 输入端3.3 基准网络3.4 Neck网络3.5 Head输出层 4 数据集准备4.1 数据标注简介4.2 数据保存 5 模型训练5.1 修…

【仙逆】尸阴宗秘密揭露,王林差点被夺舍,修仙恐怖消息曝光

Hello,小伙伴们&#xff0c;我是小郑继续为大家深度解析国漫资讯。 深度爆料&#xff0c;《仙逆》国漫第九话最新剧情&#xff0c;尸阴宗表面上令人敬畏&#xff0c;但背后却隐藏着不为人知的秘密。这个宗门暗地里为受伤或死亡的强大修真者提供夺舍容器&#xff0c;帮助他们获…

定时发圈怎么设置?

微信本身是不能定时发送朋友圈的。微信公众号可以定时发送&#xff0c;微博可以定时发送&#xff0c;那微信可不可以也定时发送呢&#xff1f;当然可以&#xff0c;只要用这个方法&#xff0c;微信也能实现定时发朋友圈&#xff0c;不用再守着时间发朋友圈了。

持续集成交付CICD:安装Jenkins Slave(从节点)

目录 一、实验 1.安装Jenkins Slave&#xff08;从节点&#xff09; 二、问题 1.salve节点启动jenkins报错 2.终止命令行后jenkins从节点状态不在线 一、实验 1.安装Jenkins Slave&#xff08;从节点&#xff09; &#xff08;1&#xff09;查看jenkins版本 Version 2.…

基于SSM的酒店客房管理系统设计与实现

末尾获取源码 开发语言&#xff1a;Java Java开发工具&#xff1a;JDK1.8 后端框架&#xff1a;SSM 前端&#xff1a;采用JSP技术开发 数据库&#xff1a;MySQL5.7和Navicat管理工具结合 服务器&#xff1a;Tomcat8.5 开发软件&#xff1a;IDEA / Eclipse 是否Maven项目&#x…

Maven-构建工具

一、背景 开发者编写完成源码&#xff0c;还需要进行编译、测试、打包、部署等一系列操作。在一些小型项目中&#xff0c;还可能通过手动方式进行以上操作。但是在大型项目中&#xff0c;难以确定以上操作的顺序&#xff0c;而且会耗费更高的时间成本。 1.构建工具 构建工具…

必看!玩转Salesforce沙盒的5个实用技巧

定期刷新沙盒对于尝试最新版本的功能&#xff0c;以及防止在生产组织的环境中缺乏测试而导致开发工作回滚至关重要。 为了确保沙盒设置在刷新后顺利进行&#xff0c;需要考虑几个因素。首先&#xff0c;确保有完善的文档化流程。文档应分为Conga、DocuSign、数据&#xff08;C…

双通道 H 桥电机驱动芯片AT8833,软硬件兼容替代DRV8833,应用玩具、打印机等应用

上期小编给大家分享了单通道 H 桥电机驱动芯片&#xff0c;现在来讲一讲双通道的驱动芯片。 双通道 H 桥电机驱动芯片能通过控制电机的正反转、速度和停止等功能&#xff0c;实现对电机的精确控制。下面介绍双通道H桥电机驱动芯片的工作原理和特点。 一、工作原理 双通道 H 桥电…