vue2 开发记录

el-select

如何修改选择项的样式/el-select-dropdown__item 文字上下显示  

测试代码

        <div style='margin-left: 100px'><!--            测试代码--><el-select filterablesize='mini'><div class='xxx-el-select'><el-optionv-for='item in [{key:1,des:2,value:3}]':key='item.value':label='item.key':value='item.value'><span style='margin-right: 5px;'>{{ item.key }}</span><br><span style='color: #8492a6; font-size: 12px'>{{ item.des }}</span></el-option></div></el-select></div>

默认的样式为

可以看到设置的换行没有显示第二行的内容,原因是默认的选项的行高限制了显示,第二行内容被遮挡了。查看元素可以看到代码中是有值的。

尝试调整.el-select-dropdown__item的style

可以看到修改后其实选项是可以按照预期显示的,那么修改样式即可。

解决方法

在外套一层div,然后通过div的class xxx-el-select-select 在使用::v-deep 修改样式。

<style scoped lang='scss'>.xxx-el-select {::v-deep .el-select-dropdown__item {margin-bottom: 8px;height: auto;line-height: 20px !important;}
}</style>

修改后的效果

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

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

相关文章

AVT Prosilica GC Vision Cameras 相机视觉说明使用安装。具体详情内容可参看PDF目录内容。

AVT Prosilica GC Vision Cameras 相机视觉说明使用安装。具体详情内容可参看PDF目录内容。

TikTok矩阵系统功能怎么写?常用源代码是什么?

TikTok矩阵系统的功能是如何编写的?又有哪些常用的源代码支撑这些功能呢?本文将通过五段源代码的分享&#xff0c;为大家揭开TikTok矩阵系统的神秘面纱。 一、TikTok矩阵系统的核心功能 TikTok的矩阵系统涵盖了多个核心功能&#xff0c;包括但不限于用户管理、内容分发、推…

【接口测试】HTTP协议介绍

目录 介绍 HTTP状态码 HTTP报文 请求方法 HTTP版本 HTTP标头 通用标头 请求标头 响应标头 get 编码 post 编码 RESTful风格 HTTPS 绝大多数的Web服务接口都是基于HTTP协议进行通信的&#xff0c;包括RESTful API和SOAP等。了解HTTP协议可以帮助测试人员理解接口的…

【多线程】CAS详解

目录 &#x1f334;什么是 CAS&#x1f338;CAS 伪代码 &#x1f38d;CAS 是怎么实现的&#x1f340;CAS 有哪些应⽤&#x1f338;实现原子类&#x1f338;实现自旋锁 &#x1f333;CAS 的 ABA 问题&#x1f338;**什么是 ABA 问题**&#xff1f;&#x1f338;ABA 问题引来的 B…

智慧城市建设的新里程碑:公共服务电子支付大屏

随着科技的飞速发展&#xff0c;我们的生活正在经历前所未有的变革。电子支付的出现&#xff0c;无疑是这场变革中的一大亮点&#xff0c;它不仅改变了我们日常的支付方式&#xff0c;更成为智慧城市建设的重要一环&#xff0c;为公众提供了更加便捷、高效的服务体验。 在以前&…

政府采购标书制作的要点解析

导语&#xff1a;政府采购是政府为满足公共利益&#xff0c;按照法定程序和标准&#xff0c;通过招标、竞争性谈判等方式&#xff0c;购买商品、工程和服务的行为。标书作为政府采购活动中的重要文件&#xff0c;其制作质量直接影响到项目的顺利进行。本文将围绕政府采购标书制…

二路归并排序的算法设计和复杂度分析and周记

数据结构实验报告 实验目的: 通过本次实验&#xff0c;了解算法复杂度的分析方法&#xff0c;掌握递归算法时间复杂度的递推计算过程。 实验内容&#xff1a; 二路归并排序的算法设计和复杂度分析 实验过程&#xff1a; 1.算法设计 第一步&#xff0c;首先要将数组进行…

【网站项目】314学生二手书籍交易平台

&#x1f64a;作者简介&#xff1a;拥有多年开发工作经验&#xff0c;分享技术代码帮助学生学习&#xff0c;独立完成自己的项目或者毕业设计。 代码可以私聊博主获取。&#x1f339;赠送计算机毕业设计600个选题excel文件&#xff0c;帮助大学选题。赠送开题报告模板&#xff…

JVM相关面试题(2024大厂高频面试题系列)

一、JVM的组成 1、JVM由哪些部分组成&#xff0c;运行流程是什么&#xff1f; 回答&#xff1a;在JVM中共有四大部分&#xff0c;分别是Class Loader&#xff08;类加载器&#xff09;、Runtime Data Area&#xff08;运行时数据区&#xff0c;内存分区&#xff09;、Execut…

MyBatis的补充用法

说明&#xff1a;之前介绍过MyBatis的用法&#xff0c;像 用注解和Mapper.xml操作数据库、在Mapper.xml里写动态SQL。最近在一次用MyBatis批量更新数据库对象的场景中&#xff0c;意识到对MyBatis的一些标签用法不太熟悉&#xff0c;所以去 MyBatis官网 看了一些文档&#xff0…

php httpfs链接hdfs

一.代码&#xff08;有bug&#xff09; GitHub - michaelbutler/php-WebHDFS: A PHP client for WebHDFS 二.调用代码 1.代码1.代码 require_once(../webhdfs/src/org/apache/hadoop/WebHDFS.php);require_once(../webhdfs/src/org/apache/hadoop/tools/Curl.php); require_o…

什么是人才储备?如何做人才储备?

很多小伙伴都会有企业面试被拒的情况&#xff0c;然后HR会告诉你&#xff0c;虽然没有录用你&#xff0c;但是你进入了他们的人才储备库&#xff0c;那么这个储备库有什么作用和特点呢&#xff1f;我们如何应用人才测评系统完善人才储备库呢&#xff1f; 人才储备一般有以下三…

Python打发无聊时光:12.用PyQt实现简易的心电起搏器界面

第一步&#xff1a;装PyQt库 pip install PyQt5 第二步&#xff1a;复制代码 import sys from PyQt5.QtWidgets import (QApplication, QMainWindow, QPushButton, QVBoxLayout,QWidget, QLabel, QProgressBar, QSlider, QLineEdit, QHBoxLayout) from PyQt5.QtCore import …

软件分层(数据结构/软件逻辑上分层+举例),相连节点的概念+如何相连,为什么是层状结构(软件分层,网络协议分层+梳理协议顺序),协议分层(打电话例子)

目录 软件分层 介绍 举例 类的继承 虚拟文件系统 线程接口封装 虚拟地址空间 总结 为什么是层状的 软件分层 网络协议 原因 梳理协议顺序 相连节点 协议分层 引入 示例 实际上 逻辑上 制定出协议 软件分层 介绍 通过将软件系统划分为不同的层次,每一层都有…

uniApp 调整小程序 单个/全部界面横屏展示效果

我们打开uni项目 小程序端运行 默认是竖着的一个效果 我们打开项目的 pages.json 给需要横屏的界面 的 style 属性 加上 "mp-weixin": {"pageOrientation": "landscape" }界面就横屏了 如果是要所有界面都横屏的话 就直接在pages.json 的 gl…

Ps:海绵工具

海绵工具 Sponge Tool可用于调整图像中特定区域的饱和度&#xff0c;常用于增加或减少颜色的饱和度。 快捷键&#xff1a;O 在特别的灰度图像上&#xff0c;则可用于调整对比度&#xff0c;这可以开发出更多的创意技巧。 ◆ ◆ ◆ 常用操作方法与技巧 1、海绵工具主要用于调整…

源码解析篇 | YOLOv8官方源码项目目录结构解析

前言&#xff1a;Hello大家好&#xff0c;我是小哥谈。YOLOv8是一种目标检测算法&#xff0c;它是YOLO&#xff08;You Only Look Once&#xff09;系列算法的第8个版本。YOLOv8相比于之前的版本&#xff0c;在检测精度和速度上都有所提升&#xff0c;它在各种场景下都表现出色…

Git源码管理

参考视频&#xff1a;16-git的日志以及版本管理_哔哩哔哩_bilibili 参考博客&#xff1a;Git && Docker 学习笔记-CSDN博客 目录 简介 个人操作初始化 初始化git目录 查看生成的git目录文件 配置git工作目录的用户信息 查看工作区的状态&#xff0c;生成文件的…

C++面试干货---带你梳理常考的面试题(一)

顾得泉&#xff1a;个人主页 个人专栏&#xff1a;《Linux操作系统》 《C从入门到精通》 《LeedCode刷题》 键盘敲烂&#xff0c;年薪百万&#xff01; 1.C和C的区别 1.语法和特性&#xff1a;C是一种过程式编程语言&#xff0c;而C是一种面向对象编程语言。C在C的基础上增加…

Java智慧云HIS医院信息化系统源码 更具灵活性、扩展性

目录 什么是云HIS 趋势与转变 HIS上云后有哪些好处 解决方案 云HIS组成 1、门诊挂号 2、住院管理 3、电子病历 4、药物管理 5、统计报表 6、综合维护 7、运营运维 什么是云HIS 云HIS是一种基于云计算技术的医院信息管理系统。云HIS可以帮助医院管理各类医院信息&a…