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.rhkb.cn/news/267338.html

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

相关文章

web自动化笔记八:滚动条处理和窗口截屏

一、滚动条处理 ①为什么要操作滚动条&#xff1f; 1. 在HTML页面中&#xff0c;由于前端技术框架的原因&#xff0c;页面元素为动态显示&#xff0c;元素根据滚动条的下拉而被加载 2. 页面注册同意条款&#xff0c;需要滚动条到最底层&#xff0c;才能点击…

vue cesium加载点与定位到指定位置

vue cesium定位到指定位置 window.viewer.camera.flyTo({destination: Cesium.Cartesian3.fromDegrees(point.longDeg, point.latDeg, 6500000), orientation: {heading: 6.2079384332084935, roll: 0.00031509431759868534, pitch: -1.535}, duration: 3})vue cesium加载点 …

QMLButton背景初始化

文章目录 异常情况解决办法 异常情况 Button {id: controltext: qsTr("Button")width: 100height: 150property color normalColor: "green"property color hoverColor: "yellow"property color pressColor: "red"background: Rectan…

Android的硬件接口HAL

我一直觉得&#xff0c;现代计算机不是一门科学&#xff0c;起码快算不上一门理科科学。上上下下全是人造&#xff0c;左左右右全是生意&#xff0c;用管理学&#xff0c;经济学去学计算机&#xff0c;也许更看得懂很多问题。HAL就是一个典型例子。 传统Linux绕开了微软的霸权…

Vue3速成

文章目录 day 11. 创建vue3工程3. 响应式数据4. 计算属性 day 25. watch 监视6. watchEffect7. 标签的ref属性8. 回顾TS中的接口_泛型_自定义类型 day 1 1. 创建vue3工程 相关代码如下&#xff1a; ## 创建vue工程 npm create vuelastest## 安装node_modules npm install //…

【六袆 - React】Next.js:React 开发框架;Next.js开发框架的特点

Next.js&#xff1a;React 开发框架 Next.js的特点 1.直观的、基于页面的路由系统&#xff08;并支持动态路由&#xff09; Next.js 提供了基于文件系统的路由&#xff0c;意味着你可以通过创建页面文件来定义路由。 伪代码示例&#xff1a; // pages/index.js export defa…

【数据结构】数组

第一章、为什么数组的下标一般从0开始编号 提到数组&#xff0c;读者肯定不陌生&#xff0c;甚至还会很自信地说&#xff0c;数组很简单。编程语言中一般会有数组这种数据类型。不过&#xff0c;它不仅是编程语言中的一种数据类型&#xff0c;还是基础的数据结构。尽管数组看起…

AI新工具(20240301) Ideogram; Image to Music Generator等

1: Ideogram 全新的多模态生图AI工具&#xff0c;以其优秀的文字渲染能力和生图能力受到业界瞩目 Ideogram是一个创新的AI工具&#xff0c;它通过在生成的图片中自然地整合文字&#xff0c;解决了生图AI领域长期存在的一个难题。这个工具特别擅长将文本以极其自然和协调的方式…

Nginx 隐藏版本信息和logo

1.隐藏版本信息 http {### 隐藏版本号 server_tokens off; } 2.隐藏图标 2.1 cd nginx 安装的路径 cd/XXXX/nginx-1.2.0 2.2 编辑文件 vim src/core/nginx.h 修改define nginx_ver 中的内容 vim src/http/ngx_http_special_response.c 修改 u_char ngx_http_error_tail[]…

腾讯云4核8G的云服务器性能水平?使用场景说明

腾讯云4核8G服务器适合做什么&#xff1f;搭建网站博客、企业官网、小程序、小游戏后端服务器、电商应用、云盘和图床等均可以&#xff0c;腾讯云4核8G服务器可以选择轻量应用服务器4核8G12M或云服务器CVM&#xff0c;轻量服务器和标准型CVM服务器性能是差不多的&#xff0c;轻…

【生成式AI】ChatGPT 原理解析(2/3)- 预训练 Pre-train

Hung-yi Lee 课件整理 预训练得到的模型我们叫自监督学习模型&#xff08;Self-supervised Learning&#xff09;&#xff0c;也叫基石模型&#xff08;foundation modle&#xff09;。 文章目录 机器是怎么学习的ChatGPT里面的监督学习GPT-2GPT-3和GPT-3.5GPTChatGPT支持多语言…

element-plus表格合并

要实现这样的表格&#xff0c; 怎么做呢&#xff1f; 甚至是这种三级的呢&#xff1f; 官网的案例也是通过这个方法进行配置的&#xff0c;也就是说表格长什么样&#xff0c;关键在怎么处理的方法上。 这是官网的方法&#xff0c;可参考拓展&#xff1a; const arraySpanMeth…

【airtest】自动化入门教程(三)Poco操作

目录 一、准备工作 1、创建一个pthon脚本 2、光标位置 2、选择Android 3、选择yes 二、定位元素 三、poco基于设备/屏幕 方式 1、poco.click( (x,y))基于屏幕点击相对坐标为x&#xff0c;y的位置 2、poco.get_screen_size() 3、poco.swipe(v1,v2)基于屏幕从v1位置滑到…

Python爬虫实战第二例【二】

零.前言&#xff1a; 本文章借鉴&#xff1a;Python爬虫实战&#xff08;五&#xff09;&#xff1a;根据关键字爬取某度图片批量下载到本地&#xff08;附上完整源码&#xff09;_python爬虫下载图片-CSDN博客 大佬的文章里面有API的获取&#xff0c;在这里我就不赘述了。 一…

Vue2:路由的两种模式history模式和hash模式

一、情景说明 之前我们写的项目启动后&#xff0c;浏览器访问时&#xff0c;路径中会有个#/&#xff0c;会导致不够美观 因为一般的访问地址都是http://123.123.123.123/aaa/bbb这种形式 这一篇&#xff0c;就来解决这个问题 二、案例 1、hash模式 特点&#xff1a;#/后的…

Docker与虚拟机比较

在对比Docker和虚拟机前&#xff0c;先简单了解下虚拟化&#xff0c;明确Docker和虚拟机分别对应的虚拟化级别&#xff0c;然后对Docker和虚拟机进行比较。需要注意的是&#xff0c;Docker和虚拟机并没有什么可比性&#xff0c;而是Docker使用的容器技术和虚拟机使用的虚拟化技…

微信小程序触屏事件_上划下划事件

一、微信小程序触屏事件 bindtouchstart&#xff1a;手指触摸动作开始 bindtouchmove&#xff1a;手指触摸后移动 bindend&#xff1a;手指触摸动作结束 属性类型说明touchesArray触摸事件&#xff0c;当前停留在屏幕中的触摸点信息的数组 Touch 对象 属性类型说明identi…

《HelloGitHub》第 95 期

兴趣是最好的老师&#xff0c;HelloGitHub 让你对编程感兴趣&#xff01; 简介 HelloGitHub 分享 GitHub 上有趣、入门级的开源项目。 这里有实战项目、入门教程、黑科技、开源书籍、大厂开源项目等&#xff0c;涵盖多种编程语言 Python、Java、Go、C/C、Swift...让你在短时间内…

DDR5内存相比DDR4内存的优势和区别?选择哪一个服务器内存配置能避免丢包和延迟高?

根据幻兽帕鲁服务器的实际案例分析&#xff0c;选择合适的DDR4与DDR5内存大小以避免丢包和延迟高&#xff0c;需要考虑以下几个方面&#xff1a; 性能与延迟&#xff1a;DDR5内存相比DDR4在传输速率、带宽、工作电压等方面都有显著提升&#xff0c;但同时也伴随着更高的延迟。D…

Javaweb之SpringBootWeb案例之自动配置的两种常见方案的详细解析

3.2.2.2 方案一 ComponentScan组件扫描 SpringBootApplication ComponentScan({"com.itheima","com.example"}) //指定要扫描的包 public class SpringbootWebConfig2Application {public static void main(String[] args) {SpringApplication.run(Sprin…