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.mzph.cn/bicheng/10103.shtml

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

相关文章

js 字符串截取,截取指定字符前面/后面的字符串

一个符号截取&#xff1a; let str hello, how are you doing? username! // 截取 ? 前面的字符串&#xff1a; let before1 str.substring(0,str.lastIndexOf("?")) // 不包含 ? console.log(before1,before1---------------); // hello, how are you doing …

Java使用httpclient发送POST请求

声明&#xff1a;实习时接到一个送餐机器人项目 涉及到httpclient 1.创建请求对象:post或者get HttpPost httpPost new HttpPost(url); 2. 创建httpclient对象 CloseableHttpClient httpclient HttpClientBuilder.create().build(); 3. 创建请求头对象 BasicResponseHa…

初识 Linux线程

再学习完Linux进程后,本期,我们来讲解Linux线程 1.为什么需要线程 在之前学习进程前,我们写的所有代码几乎都是单个执行流的,也就是说我们的代码只有一条路走. 在学习进程后,我们可以通过fork进行进程创建,给进程分配任务进行多执行流执行任务,问题来了 那我们为什么还需要…

使用torch.nn.Sequential构建神经网络

torch.nn.Sequential 是 PyTorch 中的一个非常有用的类&#xff0c;它允许用户以一种简单和直观的方式构建神经网络。Sequential 容器可以包含多个神经网络层&#xff0c;这些层会按照它们被添加到 Sequential 中的顺序依次执行。 1.关键特性 以下是 torch.nn.Sequential 的一…

Lenet5硬件加速RTL - 06(nnLinear)

timescale 1ns / 1ps// Description : 全连接层 // Change Logs : 2024.05.10 - Yang.Long - 1.0.0 - module nnLinear #(parameter G_WDEPTH 12 ,//权重深度parameter G_PDEPTH 8 ,//像素深度parameter G_LINEXLEN 160 ,//每行图像宽度pa…

清空回收站是彻底删除吗?一文解答你的疑问!

“我刚刚本来想在回收站中恢复一个文件的&#xff0c;但是一不小心就清空了回收站&#xff0c;想问问清空回收站是彻底删除吗&#xff1f;清空了回收站文件还有机会找回吗&#xff1f;” 在使用电脑的过程中&#xff0c;我们经常会将不再需要的文件或文件夹移动到回收站&#x…

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

目录 前言 1.数组和结构体相关的一些知识 1.数组 2.结构体数组 3.递归遍历数组 2.二叉树的顺序存储表示法和实现 1.定义 2.初始化 3.先序遍历二叉树 4.中序遍历二叉树 5.后序遍历二叉树 6.完整代码 前言 二叉树的非递归的表示和实现。 1.数组和结构体相关的一些知…

AUTOSAR OS调度表讲解

调度表 AUTOSAR OS通过调度表(Schedule Table)来解决一个alarm只能激活一个任务的限制。调度表是预定义的行为序列,通过到期点实现。AUTOSAR OS遍历调度表并依次处理每个到期点,遍历由底层的counter来实现驱动。 到期点发生在从概念零开始的静态配置偏移量上。偏移量在静…

【程序设计和c语言-谭浩强配套】(适合专升本、考研)

一晃大半年没更新了&#xff0c;这一年一直在备考&#xff0c;想着这几天把前段时间学的c语言给大家分享一下&#xff0c;在此做了一个专栏&#xff0c;有需要的小伙伴可私信获取o。 简介&#xff1a;本专栏所有内容皆适合专升本、考研的复习资料&#xff0c;本人手上也有日常…

Lua 数字格式化

在编程中&#xff0c;对数字进行格式化是一项常见的任务&#xff0c;特别是当我们需要在用户界面中显示数据或生成报告时。在 Lua 中&#xff0c;我们可以使用一些简单而有效的函数来实现数字的格式化。在本文中&#xff0c;我们将介绍一个由几个函数组成的小型 Lua 库&#xf…

【2024亚马逊云科技峰会】Amazon Bedrock + Llama3 生成式AI实践

在 4 月 18 日&#xff0c;Meta在官网上公布了旗下最新大模型Llama 3。目前&#xff0c;Llama 3已经开放了80亿&#xff08;8B&#xff09;和700亿&#xff08;70B&#xff09;两个小参数版本&#xff0c;上下文窗口为8k&#xff0c;据称&#xff0c;通过使用更高质量的训练数据…

JAVA学习-练习试用Java实现电话号码的字母组合

问题: 给定一个仅包含数字 2-9 的字符串&#xff0c;返回所有它能表示的字母组合。答案可以按 任意顺序 返回。 给出数字到字母的映射如下&#xff08;与电话按键相同&#xff09;。注意 1 不对应任何字母。 示例 1&#xff1a; 输入&#xff1a;digits "23" 输…

Java并发编程之锁的艺术:面试与实战指南(四)

Java并发编程之锁的艺术&#xff1a;面试与实战指南&#xff08;四&#xff09; 文章目录 Java并发编程之锁的艺术&#xff1a;面试与实战指南&#xff08;四&#xff09;前言二十七、什么是AQS&#xff08;AbstractQueuedSynchronizer&#xff09;&#xff1f;它在Java并发包中…

Skywalking系列之日志分析语言LAL的配置与解析

提到Skywalking相比并不陌生&#xff0c;或多或少地听到过这个名词&#xff0c;如果你是JAVA开发者&#xff0c;那么可能就更为了解。 作为国内甚至国际上热度比较高、社区比较活跃的APM(Application Performance Monitoring System)系统&#xff0c;它拥有众多的使用者&#…

react18+ts如何生成二维码并且下载

目录 一、下载qrcode.react 二、引入qrcode.react 三 、编写下载二维码的函数 在react开发中如果需要二维码&#xff0c;笔者选择使用qrcode.react来快速生成。 一、下载qrcode.react pnpm add qrcode.react 二、引入qrcode.react import {Box,Stack,Fab} from mui/mate…

【基础算法总结】二分查找一

二分查找一 1. 二分查找2.在排序数组中查找元素的第一个和最后一个位置3.x 的平方根4.搜索插入位置 点赞&#x1f44d;&#x1f44d;收藏&#x1f31f;&#x1f31f;关注&#x1f496;&#x1f496; 你的支持是对我最大的鼓励&#xff0c;我们一起努力吧!&#x1f603;&#x1…

spring boot 线程池

文章目录 引言I 配置线程池II 封装线程池任务执行器2.1 唯一性标识2.2 LogFilter:设置request_id2.3 logback使用request_idIII 检测线程池引言 SpringBootApplication启动类上需要加入注解@EnableAsync或者在配置类上使用 应用场景:封装线程池任务执行器:在任务提交时,会…

制造业数字化转型解决方案及应用(125页PPT)

一、资料介绍 《制造业数字化转型解决方案及应用》是一份内容丰富、深入剖析制造业数字化转型的125页PPT资料。这份资料以“智能制造、制造业数字化转型、制造业数字化转型案例”为关键词&#xff0c;全面展现了制造业数字化转型的核心理念、解决方案以及实际应用案例。 关注…

【JS红宝书学习笔记】第1、2章

第1章 什么是JavaScript JavaScript 是一门用来与网页交互的脚本语言&#xff0c;包含以下三个组成部分。 ECMAScript&#xff1a;由 ECMA-262 定义并提供核心功能。文档对象模型&#xff08;DOM&#xff09;&#xff1a;提供与网页内容交互的方法和接口。浏览器对象模型&…

块元素、内联元素、行内块元素

一、介绍&#xff1a; CSS元素划分成块元素、行内元素&#xff08;内联元素&#xff09;、行内块元素等多种常用类型。也就是说&#xff1a;在CSS中&#xff0c;元素根据其在页面上的布局方式被分为不同的显示类型。 背景&#xff1a;HTML负责定义网页的结构和内容&#xff0c…