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://www.rhkb.cn/news/323960.html

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

相关文章

Cocos creator实现《战机长空》关卡本地存储功能

Cocos creator实现《战机长空》关卡本地存储功能 Cocos creator在开放小游戏过程中&#xff0c;经常会出现设置关卡&#xff0c;这里记录一下关卡数据本地存储功能。 一、关卡设置数据 假如我们有关卡数据如下&#xff0c; let settings [ { level: 1, // 第1关 score: 0,…

14_Scala面向对象编程_属性

文章目录 属性1.类中属性声明2.系统默认赋值3.BeanProperty4.整体代码如下 属性 1.类中属性声明 // 1.给Scala声明属性&#xff1b;var name :String "zhangsan"val age :Int 302.系统默认赋值 scala由于初始化变量必须赋值&#xff0c;为了解决此问题可以采…

Docker部署nginx并启用https加密连接

前言 在当今互联网时代&#xff0c;安全性成为越来越重要的议题。随着网络攻击日益猖獗&#xff0c;保护数据和通信的安全性变得至关重要。在这种背景下&#xff0c;对于在 Docker 中运行 Nginx 是否需要使用 HTTPS 这一问题&#xff0c;我们需要考虑到网络安全的重要性以及 H…

ssrf漏洞学习——基础知识

一、SSRF是什么&#xff1f; SSRF(Server-Side Request Forgery:服务器端请求伪造) 是一种由攻击者构造形成由服务端发起请求的一个安全漏洞。 一般情况下&#xff0c;SSRF攻击的目标是从外网无法访问的内部系统。&#xff08;正是因为它是由服务端发起的&#xff0c;所以它能…

爬虫-无限debug场景 解决方式

解决无限debug 场景1 1. 鼠标右键 选择 continue to here&#xff08;此处不停留&#xff09;2. 鼠标右键 选择 edite breakpoint 设置 10 保证条件不成立 这行永远不执行3.方法置空 1. 方法调用加断点2. 控制台 setInterval function name() {}4. 替换文件 5. hoo…

数据结构与算法学习笔记九-二叉树的链式存储表示法和实现(C语言)

目录 前言 1.二叉树的链式存储 2.二叉链表的表示和实现 1.定义 2.创建 4.中序遍历二叉树 5.后序遍历二叉树 6.后序遍历二叉树 7.完整代码 前言 这篇博客主要介绍二叉树的链式存储结构。 1.二叉树的链式存储 上篇文章中介绍了二叉树的顺序存储结构&#xff0c;在最坏的…

鸿蒙内核源码分析(文件句柄篇) | 你为什么叫句柄

句柄 | handle int open(const char* pathname,int flags); ssize_t read(int fd, void *buf, size_t count); ssize_t write(int fd, const void *buf, size_t count); int close(int fd);只要写过应用程序代码操作过文件不会陌生这几个函数,文件操作的几个关键步骤嘛,跟把大…

WMS仓储管理系统库存分类的详细讲解

在当今日益复杂和快速变化的商业环境中&#xff0c;仓库管理成为了一个企业不可或缺的关键环节。WMS仓储管理系统解决方案凭借其自动化和信息化的优势&#xff0c;为企业带来了革命性的改变&#xff0c;特别是在库存分类方面。接下来&#xff0c;我们将深入探讨WMS仓储管理系统…

一篇文章,系统性聊聊Java注解

你好&#xff01; 这类系统性聊聊***知识点的文章&#xff0c;是希望给大家带来对某个技术的全貌认识&#xff0c;如果大家喜欢&#xff0c;后续可以陆续更新此系列 下面&#xff0c;开始今天的分享 在之前&#xff0c;我们已经分享过注解相关的三个面试题&#xff0c; 今天的…

基于SSM的文化遗产的保护与旅游开发系统(有报告)。Javaee项目。ssm项目。

演示视频&#xff1a; 基于SSM的文化遗产的保护与旅游开发系统&#xff08;有报告&#xff09;。Javaee项目。ssm项目。 项目介绍&#xff1a; 采用M&#xff08;model&#xff09;V&#xff08;view&#xff09;C&#xff08;controller&#xff09;三层体系结构&#xff0c;…

Docker部署Metabase

文章目录 Docker安装MetabaseCentOS7安装Docker获取最新的 Docker 镜像启动Metabase容器在Metabase初始化时查看日志访问Metabase Metabase 的 ClickHouse 驱动程序安装环境简介删除容器创建容器下载click house驱动放入驱动重启容器将元数据库连接到 ClickHouse报错解决 Docke…

Linux 安装JDK和Idea

安装JDK 下载安装包 下载地址&#xff1a; Java Downloads | Oracle (1) 使用xshell 上传JDK到虚拟机 (2) 移动JDK 包到/opt/environment cd ~ cd /opt sudo mkdir environment # 在 /opt下创建一个environment文件夹 ls# 复制JDK包dao /opt/environment下 cd 下载 ls jd…

26 JavaScript学习:JSON和void

JSON 英文全称 JavaScript Object NotationJSON 是一种轻量级的数据交换格式。JSON是独立的语言JSON 易于理解。 JSON 实例 简单的 JSON 字符串实例: "{\"name\": \"Alice\", \"age\": 25, \"city\": \"San Francisco\&…

如何使git提交的时候忽略一些特殊文件?

认识.gitignore文件 在生成远程仓库的时候我们会看到这样一个选项&#xff1a; 这个.gitignore文件有啥用呢&#xff1f; .gotignore文件是Git版本控制系统中的一个特殊文件。用来指定哪些文件或者目录不被Git追踪或者提交到版本库中。也就意味着&#xff0c;如果我们有一些文…

网络相关笔记

IPv4地址 IPv4地址通常以“点分十进制”形式书写&#xff0c;即四个0-255之间的十进制数&#xff0c;各数之间用英文句点&#xff08;.&#xff09;分隔&#xff0c;例如&#xff1a;192.0.2.1。总共32位的地址空间可以表示大约42亿个不同的地址。 IPv4地址结构包括&#xff…

wordpress外贸建站公司歪建站新版网站上线

wordpress外贸建站公司 歪猫建站 歪猫WordPress外贸建站&#xff0c;专业从事WordPress多语言外贸小语种网站建设与外贸网站海个推广、Google SEO搜索引擎优化等服务。 https://www.waimaoyes.com/dongguan

使用Python实现DataFrame中奇数列与偶数列的位置调换

目录 一、引言 二、背景知识 三、问题描述 四、解决方案 五、案例分析与代码实现 六、技术细节与注意事项 七、扩展与应用 八、封装为函数 九、错误处理与健壮性 十、性能优化 十一、总结与展望 一、引言 在数据处理和分析中&#xff0c;数据框&#xff08;DataFra…

Springboot集成Mybatispuls操作mysql数据库-04

MyBatis-Plus&#xff08;简称MP&#xff09;是一个MyBatis的增强工具&#xff0c;在MyBatis的基础上只做增强而不做改变。它支持所有MyBatis原生的特性&#xff0c;因此引入MyBatis-Plus不会对现有的MyBatis构架产生任何影响。MyBatis-Plus旨在简化开发、提高效率&#xff0c;…

数据结构-二叉树结尾+排序

一、二叉树结尾 1、如何判断一棵树是完全二叉树。 我们可以使用层序遍历的思路&#xff0c;利用一个队列&#xff0c;去完成层序遍历&#xff0c;但是这里会有些许的不同&#xff0c;我们需要让空也进队列。如果队列里到最后只剩下空那么这棵树就是完全二叉树。具体的实现如下…

【springboot基础】如何搭建一个web项目?

正在学习springboot&#xff0c;还是小白&#xff0c;今天分享一下如何搭建一个简单的springboot的web项目&#xff0c;只要写一个类就能实现最基础的前后端交互&#xff0c;实现web版helloworld &#xff0c;哈哈&#xff0c;虽然十分简陋&#xff0c;但也希望对你理解web运作…