el-select选项框内容过长

 利用popper-class实现选项框内容过长,截取显示功能:

<el-select popper-class="popper-class" :popper-append-to-body="false" v-model="value" placeholder="请选择"><el-optionv-for="item in options":key="item.value":label="item.label":value="item.value"><el-tooltipplacement="top":disabled="item.label.length<17"><div slot="content"><span>{{item.label}}</span></div><div class="iclass-text-ellipsis">{{ item.label }}</div></el-tooltip></el-option>
</el-select><script>export default {data() {return {options: [{value: '选项1',label: '黄金糕黄金糕黄金糕黄金糕黄金糕黄金糕黄金糕黄金糕黄金糕'}, {value: '选项2',label: '双皮奶双皮奶双皮奶双皮奶双皮奶双皮奶双皮奶双皮奶双皮奶'}, {value: '选项3',label: '蚵仔煎蚵仔煎蚵仔煎蚵仔煎蚵仔煎蚵仔煎蚵仔煎蚵仔煎蚵仔煎'}],value: ''}}}
</script><style scoped>
.el-select {width: 300px;
}
.el-select ::v-deep .popper-class {width: 300px;
}
.iclass-text-ellipsis {white-space: nowrap;overflow: hidden;text-overflow: ellipsis;
}
</style>

结果如下:

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

如若内容造成侵权/违法违规/事实不符,请联系瞎胡闹网进行投诉反馈,一经查实,立即删除!

相关文章

Win10 WSL2 Ubuntu 22.04 配置深度学习环境

文章目录 WSL安装Anaconda下载Anaconda安装包安装配置conda命令conda换国内源conda初始化shell环境conda init手动源激活脚本&#xff1a; 安装Windows上的NVIDIA GPU驱动WSL安装CUDA Toolkit安装12.1版本环境配置报错1报错2 内存不足导致安装崩溃问题描述问题分析问题解决 WSL…

Topaz Photo AI for Mac:专业级照片处理软件

Topaz Photo AI for Mac是一款专为Mac用户设计的专业级照片处理软件。它集成了先进的人工智能技术&#xff0c;为用户提供了强大的照片处理功能。无论是照片修复、增强还是转换&#xff0c;Topaz Photo AI都能轻松应对。 这款软件具备强大的AI技术&#xff0c;能够自动识别和修…

您的文件和驱动器上的“密码保护”有多安全?

某些行业&#xff08;例如医疗保健、法律和公司&#xff09;的人们在通过电子邮件发送文件时通常依赖密码保护&#xff0c;认为它可以提供足够的安全性来防止窥探。然而&#xff0c;对 PDF 或 Excel 文件进行简单的密码保护并不像看起来那样万无一失。 使用密码保护文件而不加…

JAVA 项目<果园之窗>_完结

目录 1、前言&#xff1a;2、视频展示&#xff1a;3、环境配置&#xff1a;4、工程代码&#xff1a;5、原理&#xff1a;6、原理补充&#xff1a;7、综上&#xff1a; 1、前言&#xff1a; 因为没有足够的时间这个项目用的是别人搭好的框架&#xff0c;在此基础上做调整并根据前…

verilog中输入序列连续的序列检测

编写一个序列检测模块&#xff0c;检测输入信号a是否满足01110001序列&#xff0c;当信号满足该序列&#xff0c;给出指示信号match。 模块的接口信号图如下&#xff1a; 代码如下&#xff1a; &#xff08;CSDN代码块不支持Verilog&#xff0c;代码复制到notepad编辑器中&am…

知识库文档系统源码部署/搭建/上线/运营/售后/更新

一款基于ThinkPHPFastAdmin开发的知识库文档系统&#xff0c;可用于企业工作流程的文档管理&#xff0c;结构化记录沉淀高价值信息&#xff0c;形成完整的知识体系&#xff0c;能够轻松提升知识的流转和传播效率&#xff0c;更好地成就组织和个人。为部门、团队或项目搭建知识库…

STM32_HAL_RTC_中断实现闹钟

1STM32设置 在STM32Cude中设置RTC//具体设置看先前发的文章 再打开闹钟中断&#xff08;如下图&#xff09; 2代码思路 2.1启动闹钟&#xff08;HAL_RTC_SetAlarm_IT(&hrtc,&sAlarm,FORMAT_BCD)&#xff09; 2.2设置回调函数&#xff08;void HAL_RTC_AlarmAEventC…

EXPLORER - Stone Age

一个程式化的包,包含史前建筑、巨石结构、角色、自然资产、工具和各种道具,可以添加到你的游戏中。 包装内容: + 570 资产。 男性和女性角色,包括数十件服装、皮肤和配饰。 - 8 - 预制角色变体 安装后即可直接使用。 - 15 - 包括动画(8个男性动画和7个女性动画),与Mecan…

node pnpm修改默认包的存储路径

pnpm与npm的区别 PNPM和NPM是两个不同的包管理工具。 NPM&#xff08;Node Package Manager&#xff09;是Node.js的官方包管理工具&#xff0c;用于安装、发布和管理Node.js模块。NPM将包安装在项目的node_modules目录中&#xff0c;每个包都有自己的依赖树。 PNPM&#xf…

定时任务执行 报错command not found 解决方案

目录 写在前面所需知识 问题复现解决方式方法1. 使用绝对路径的命令&#xff1a;方法2. 重新加载环境变量&#xff1a;成功解决截图 原理 写在前面 定时任务脚本出现command not found报错&#xff0c;解决方案。 所需知识 定时任务shell脚本环境变量 问题复现 编写了一个…

2024 年最新使用 ntwork 框架搭建企业微信机器人详细教程

NTWORK 概述 基于 PC 企业微信的 api 接口&#xff0c;支持收发文本、群、名片、图片、文件、视频、链接卡片等。 下载安装 ntwork pip install ntwork国内源安装 pip install -i https://pypi.tuna.tsinghua.edu.cn/simple ntwork企业微信版本下载 官方下载&#xff1a;h…

2024年湖北省专升本C语言程序设计大题真题解析

2024年湖北省的专升本考试已于4月30日举行&#xff0c;考试中&#xff0c;出现了许多不同的考试题目&#xff0c;我在网上找到一所高校专升本的大题&#xff08;好像是湖北师范的&#xff0c;后续会有湖北理工的大题真题解析&#xff0c;敬请期待&#xff09;&#xff0c;那么我…

024.反转链表

给定单链表的头节点 head &#xff0c;请反转链表&#xff0c;并返回反转后的链表的头节点。 示例 1&#xff1a; 输入&#xff1a;head [1,2,3,4,5] 输出&#xff1a;[5,4,3,2,1]示例 2&#xff1a; 输入&#xff1a;head [1,2] 输出&#xff1a;[2,1]示例 3&#xff1a; 输…

Web数字孪生引擎

Web数字孪生引擎是指用于在Web上创建和运行数字孪生的软件平台。它们通常提供一组API和工具&#xff0c;用于连接到实时数据源、可视化数据并创建交互式体验。Web数字孪生引擎被广泛应用于各种应用&#xff0c;例如工业物联网、智能建筑、城市管理和公共安全等。北京木奇移动技…

SpringCloudAlibaba:5.1Sentinel的基本使用

概述 简介 Sentinel是阿里开源的项目&#xff0c;提供了流量控制、熔断降级、系统负载保护等多个维度来保障服务之间的稳定性。 官网 https://sentinelguard.io/zh-cn/ Sentinel的历史 2012 年&#xff0c;Sentinel 诞生&#xff0c;主要功能为入口流量控制。 2013-2017 年…

【GlobalMapper精品教程】078:计算点的平面(经纬度)坐标、面状数据的周长面积

文章目录 一、加载数据二、计算点的坐标三、计算面状数据的周长面积一、加载数据 在点状图层上右键,编辑属性。 属性表如下所示,可以看到,并没有点的经纬度或者平面坐标。 二、计算点的坐标 选择所有点→右键→属性样式功能→向选定的要素添加坐标边界功能。

系统架构设计师 - 计算机组成与体系结构(1)

计算机组成与体系结构 计算机组成与体系结构计算机结构 ★CPU 组成结构运算器组成控制器组成 计算机体系结构冯诺依曼结构哈弗结构 嵌入式芯片&#xff08;了解&#xff09; 存储系统 ★★★★概述Cache主存编址磁盘管理磁盘基本结构与存取过程磁盘优化分布存储磁盘管理 大家好…

【Web后端】servlet基本概念

1.ServletAPI架构 HttpServlet继承GenericServletGenericServlet实现了Servlet接口&#xff0c;ServletConfig接口,Serializable接口自定义Servlet继承HttpServlet 2.Servlet生命周期 第一步&#xff1a;容器加载Servlet第二步&#xff1a;调用Servlet的无参构造方法&#xf…

章十二、数据库(1) —— 概述、MySQL数据库、SQL、DDL、DML、DQL、多表设计

为什么学习数据库&#xff1a; ● 实现数据持久化到本地&#xff1b; ● 使用完整的管理系统统一管理&#xff0c;可以实现结构化查询&#xff0c;方便管理&#xff1b; 一、 数据库概述 ● 数据库 数据库&#xff08;DataBase&#xff09;为了方便数据的 存储 和 管理 &…

CAP与BASE分布式理论

一、分布式理论 1.CAP理论 CAP理论是说对于分布式数据存储&#xff0c;最多只能同时满足一致性&#xff08;C&#xff0c;Consistency&#xff09;、可用性&#xff08;A&#xff0c; Availability&#xff09;、分区容忍性&#xff08;P&#xff0c;Partition Tolerance&…