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.hqwc.cn/news/688537.html

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

相关文章

Linux 第二十七章

&#x1f436;博主主页&#xff1a;ᰔᩚ. 一怀明月ꦿ ❤️‍&#x1f525;专栏系列&#xff1a;线性代数&#xff0c;C初学者入门训练&#xff0c;题解C&#xff0c;C的使用文章&#xff0c;「初学」C&#xff0c;linux &#x1f525;座右铭&#xff1a;“不要等到什么都没有了…

基于SpringBoot+Vue的笔记共享平台 免费获取源码

项目源码获取方式放在文章末尾处 项目技术 数据库&#xff1a;Mysql5.7/8.0 数据表&#xff1a;10张 开发语言&#xff1a;Java(jdk1.8) 开发工具&#xff1a;idea 前端技术&#xff1a;vue 后端技术&#xff1a;SpringBoot 功能简介 (有文档) 项目获取关键字&#…

数据库数据恢复—SQL Server数据库ndf文件变为0KB的数据恢复案例

SQL Server数据库故障&#xff1a; 存储设备损坏导致存储中SQL Server数据库崩溃。对数据库文件进行恢复后&#xff0c;用户发现有4个ndf文件的大小变为0KB。该SQL Server数据库每10天生成一个大小相同的NDF文件&#xff0c;该SQL Server数据库包含两个LDF文件。 SQL Server数据…

笨方法自学python(五)-字符串和文本

字符串和文本 在这章习题中我们将使用复杂的字符串来建立一系列的变量&#xff0c;从中你将学到它们的用途。首先我们解释一下字符串是什么 东西。 字符串通常是指你想要展示给别人的、或者是你想要从程序里“导出”的一小段字符。Python 可以通过文本里的双引号 " 或者单…

会员卡积分收银源码系统 支持多门店系统 带完整的安装代码包以及安装搭建教程

在数字化浪潮的推动下&#xff0c;传统零售行业面临着巨大的转型压力。为了满足现代消费者多样化的需求&#xff0c;提高门店管理效率和顾客满意度&#xff0c;小编给大家分享一款会员卡积分收银源码系统——支持多门店系统&#xff0c;并附带了完整的安装代码包以及安装搭建教…

西门子PLC定时器使用与疑难杂症

一、简介 S7-200提供了256个定时器&#xff0c;依据分辨率分三种类型&#xff1a;1ms&#xff0c;10ms和100ms&#xff1b;依据功能分为接通延时定时器&#xff08;TON&#xff09;、有记忆的接通延时定时器&#xff08;TONR)和断开延时定时器&#xff08;TOF)。 接通延时定时…

QT的C++版本是如何从ui文件编译成C++可以使用的.h文件的

Desktop_Qt_6_7_0_MinGW_64_bit是一个编译器&#xff0c;可以将ui文件编译为.h文件。我们可以在项目文件下看到这一样一个文件&#xff1a; 这里的ui_mainwindow.h文件我们可以打开看一下&#xff1a;你会发现你所有的ui设计都被记录在了这里。 /***************************…

从Python整数变量内存大小占用28字节谈起

实验结果 本机环境64位Python 3.12 内存布局图 0 4 8 12 16 20 24 28 |----------|----------|----------|----------|----------|----------|----------| | ob_refcnt | ob_type | ob_digit | …

二手交易系统基于Uniapp+FastAdmin+ThinkPHP(源码搭建/上线/运营/售后/更新)

​一款基于UniappFastAdminThinkPHP开发的二手交易系统&#xff0c;卖家可以发布二手信息&#xff0c;买家可以在线询价&#xff0c;支持在线聊天(高级授权)&#xff0c;在线购买支付&#xff0c;支持发布高价回收(高级授权)信息。自带社交板块&#xff0c;用户可以发布帖子、加…

微信小程序开发【Coffee Shopping】(1)

1.环境准备 微信开发者工具&#xff1a;https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html 前端常用网站集合&#xff1a;http://www.wwp666.cn/ 微信小程序开发文档&#xff1a;https://developers.weixin.qq.com/miniprogram/dev/framework/quicksta…

将来会是Python、Java、Golang三足鼎立吗?

在开始前我有一些资料&#xff0c;是我根据网友给的问题精心整理了一份「 Java的资料从专业入门到高级教程」&#xff0c; 点个关注在评论区回复“888”之后私信回复“888”&#xff0c;全部无偿共享给大家&#xff01;&#xff01;&#xff01; 软件工程里没有银弹&#xff…

EMAIL-PHP功能齐全的发送邮件类可以发送HTML和附件

EMAIL-PHP功能齐全的发送邮件类可以发送HTML和附件 <?php class Email { //---设置全局变量 var $mailTo ""; // 收件人 var $mailCC ""; // 抄送 var $mailBCC ""; // 秘密抄送 var $mailFrom ""; // 发件人 var $mailSubje…