el-select选项框内容过长

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

<el-select popper-class="popper-class" :popper-append-to-body="false" v-model="value" placeholder="请选择">
    <el-option
      v-for="item in options"
      :key="item.value"
      :label="item.label"
      :value="item.value"
    >
        <el-tooltip
          placement="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>

结果如下:

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

你不知道的ConstraintLayout高级用法

文章目录 1. ConstraintLayout介绍2. 高级用法2.1 Gone Margin2.2 偏移2.3 居中2.4 尺寸约束2.5 链2.6 角度定位&#xff08;圆形定位&#xff09; 3. 工具类3.1 Guideline&#xff08;参考线&#xff09;3.2 Barrier&#xff08;栅栏&#xff09;3.3 Group&#xff08;组&…

2023年建筑特种作业人员安全生产知识试题

100分题库提供安全员考试试题、建筑安全员考试预测题、建筑安全员ABC考试真题、安全员证考试题库等&#xff0c;提供在线做题刷题&#xff0c;在线模拟考试&#xff0c;助你考试轻松过关。 判断题&#xff08;1-20&#xff09; 1.《建筑工程安全生产管理条例》是我国第一部关于…

docker搭建redis6.0(docker rundocker compose演示)

文章讲了&#xff1a;docker下搭建redis6.0.20遇到一些问题&#xff0c;以及解决后的最佳实践方案 文章实现了&#xff1a; docker run搭建redisdocker compose搭建redis 搭建一个redis’的过程中遇到很多问题&#xff0c;先简单说一下搭建的顺序 找一个redis.conf文件&…

PMP证书好考吗?

PMP新考纲还颠覆了自己旧有的五大知识领域&#xff0c;将原来的五大过程组整合成新领域中过程的一部分&#xff0c;提出了新的商业环境、过程、人员三大知识领域。 最关键的是&#xff0c;在新考纲中明确写到&#xff1a; 重要注意事项。通过工作任务分析开展的研究证实&…

WebSocket基础知识

WebSocket是什么&#xff1f; WebSocket 是一种网络通信协议&#xff0c;它提供了全双工通信机制&#xff0c;允许服务器主动向客户端发送消息&#xff0c;而不仅限于响应客户端的请求。它使用类似于 HTTP 的握手来建立连接&#xff0c;然后使用单独的持久连接来进行通信。这种…

上海计算机学会2023年9月月赛C++丙组T2Z形填充

题目描述 给定一个整数 n&#xff0c;再给定 n2 个字符&#xff0c;请将这些字符以 z 形排成一个 nn 的矩阵。 z 形的定义是&#xff0c;第一个字符在左上角&#xff0c;然后沿对角线以 z 形放置字符。对于 n4 &#xff0c;z 形排列的先后顺序标记如下&#xff1a; 输入格式 …

用友GRPA++Cloud任意文件读取

文章目录 免责声明漏洞描述漏洞原理影响版本漏洞复现修复建议 免责声明 文章只供交流与学习&#xff0c;切莫做违法犯罪的事情 漏洞描述 用友 GRP-ACloud 政府财务云产品是以政府会计准则和预算管理一体化规范为基准&#xff0c;服务于政府行政事业单位&#xff0c;落实国家…

高标准农田建设项目天空地一体化智慧监管平台

一、建设背景 党中央、国务院高度重视高标准农田建设。国务院办公厅印发的《关于切实加强高标准农田建设提升国家粮食安全保障能力的意见》 明确提出&#xff0c;大力推进高标准农田建设&#xff0c;到2022年&#xff0c;建成10亿亩高标准农田&#xff0c;以此稳定保障1万亿斤以…

科技查新中化工领域查新点如何确立与提炼?案例讲解!

我国化工科技查新工作始于1985年&#xff0c;至今经历了30多年的发展。化工类课题包含化工、炼油、 冶金、能源、轻工、石化、环境、医药、环保和军工等&#xff0c; 具有物质种类繁多、制备工艺复杂等特点。因此&#xff0c;本文结合化工查新项目实例&#xff0c;总结提高化工…

同步时序电路的设计方法

同步时序电路的设计方法 基本步骤 分析举例 【例1】 设计一个按自然态序变化的 同步七进制加法计数器&#xff0c;计数规则为逢七进一&#xff0c;产生一个进位输出 【解】 Step1&#xff1a;建立原始状态转换图 Step2&#xff1a;状态化简 没有能够合并的等效状态&#…

成为一名算法工程师需要掌握哪些技术栈

成为算法工程师需要学习的编程技能主要包括以下几个方面&#xff1a; Python&#xff1a;Python是算法工程师最常使用的编程语言之一。它拥有简洁易读的语法和丰富的库&#xff0c;如NumPy、Pandas、SciPy、Matplotlib等&#xff0c;这些库为数据处理、科学计算和可视化提供了…

红帽为 Red Hat OpenShift AI 扩大与 Elasticsearch 向量数据库的合作

作者&#xff1a;来自 Elastic Aditya Tripathi 红帽和 Elastic 今天宣布开展合作&#xff0c;以便在 Red Hat OpenShift AI 上集成 Elasticsearch 向量数据库。 Red Hat OpenShift 用户现在可以通过红帽生态系统目录实施 Elasticsearch 以进行向量搜索和检索增强生成 (RAG) 应…

iOS--runloop的初步认识

runloop的初步认识 简单认识runloopEvent looprunloop其实就是个对象NSRunloop和CFRunLoopRef的依赖关系runloop与线程runloop moderunloop sourceCFRunLoopSourceCFRunLoopObserverCFRunLoopTimer runloop的实现runloop的获取添加ModeCFRunLoopAddCommonMode 添加Run Loop Sou…

万能门店小程序开发平台功能源码系统 带完整的安装代码包以及安装搭建教程

互联网技术的迅猛发展和用户对于便捷性需求的不断提高&#xff0c;小程序以其轻量、快捷、无需安装的特点&#xff0c;成为了众多商家和开发者关注的焦点。为满足广大商家对于门店线上化、智能化管理的需求&#xff0c;小编给大家分享一款“万能门店小程序开发平台功能源码系统…

14.跳跃游戏Ⅱ

文章目录 题目简介题目解答解法一&#xff1a;贪心算法动态规划代码&#xff1a;复杂度分析&#xff1a; 题目链接 大家好&#xff0c;我是晓星航。今天为大家带来的是 跳跃游戏Ⅱ 相关的讲解&#xff01;&#x1f600; 题目简介 题目解答 解法一&#xff1a;贪心算法动态规划…

el-select下拉框 添加 el-checkbox 多选框,支持全选、取消全选

el-select下拉框 添加 el-checkbox 多选框&#xff0c;支持全选、取消全选 前言一、实现思路二、实现代码1.模板代码2. css 样式3.js 代码 DEMO 演示总结 前言 实现效果预览 提示&#xff1a;本内容基于element-ui 组件实现&#xff0c;如果使用其他组件库、可参考下面实现方…

QML 本地存储(Setting,sqlite)

Qt hello - 专注于Qt的技术分享平台 QML 原生的储存方有两种&#xff1a; 1&#xff0c;Settings 跟QWidget 中的QSettings 一样&#xff0c;可以简单的存储一些配置。 2&#xff0c;Sqlite sqlite数据库。可以存储一些复杂的数据。 一&#xff0c;Settings 我们以一个按钮的位…

ROS2 conda 环境下报 No module named ‘catkin_pkg‘

这里使用的环境是&#xff1a;Ubuntu 22.04, ROS2, Conda python 虚拟环境是3.10 ~/.bashrc 里注释掉 conda&#xff0c;并添加 export PYTHONPATH$PYTHONPATH:/usr/lib/python3/dist-packages sudo gedit ~/.bashrc source ~/.bashrc

算法day04

第一题 &#xff1a; 209. 长度最小的子数组 有上题可知&#xff0c;我们会采用双指针和单调性的思路来解决 我们本题采用左右双指针从数组的0位置同向前进&#xff0c;所以将此类模型称为滑块&#xff1b; 步骤思路如下&#xff1a; 步骤一&#xff1a; 定义所有双指针都指向…

时间选择框选择月份后生成选择月份的第一天以及下一个月份的第一天

const onChange e > {const date e ? new Date(e.$d) : new Date()// 获取年份和月份const year date.getFullYear()let month date.getMonth() 1// 格式化月份&#xff0c;确保为两位数字month month < 9 ? 0 month : month// 计算结束年份和月份const endMont…