当前位置: 首页 > news >正文

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.lryc.cn/news/345772.html

相关文章:

  • K8S面试题学习5
  • 字符以及字符串函数
  • 记录解决问题--redis ssl连接
  • 买卖股票的最佳时机
  • Linux部署安装
  • docker搭建mysql集群实现主从复制
  • Neo4j 之安装和 CQL 基本命令学习
  • 【全开源】JAVA台球助教台球教练多端系统源码支持微信小程序+微信公众号+H5+APP
  • 机器学习-如何为模型选择评估指标?
  • 【AutoGPT】踩坑帖(follow李鱼皮)
  • 机器学习-L1正则/L2正则
  • Linux——socket编程之tcp通信
  • HTTP协议介绍
  • elasticsearch安装配置注意事项
  • Istio 流量管理(请求路由、流量转移、请求重试、流量镜像、故障注入、熔断等)介绍及使用
  • Transformers中加载预训练模型的过程剖析
  • 使用MCU的 GPIO口 模拟SDIO时序读写TF/SD卡的可能性。
  • SSM【Spring SpringMVC Mybatis】——Mybatis(二)
  • 在线教育系统在线网校报价,培训机构是怎样招聘老师的?流程是什么?
  • 您的文件和驱动器上的“密码保护”有多安全?
  • 4000字超详解Linux权限
  • SearXNG - 一个注重隐私的互联网元搜索引擎
  • (第15天)【leetcode题解】459、重复的子字符串
  • PostgreSQL的学习心得和知识总结(一百四十二)|深入理解PostgreSQL数据库数据库之 Continuous Integration
  • 【外币兑换,简单贪心】
  • 数据库入门(sql文档+命令行)
  • 【机器学习300问】84、AdaGrad算法是为了解决什么问题?
  • Java算法-力扣leetcode-14. 最长公共前缀
  • 视频拼接融合产品的产品与架构设计(二)
  • 【docker 】push 镜像到私服