element组件库el-select下拉框样式修改不了的问题

于 2024-07-26 10:12:26 发布
阅读量145 收藏 3
点赞数 2
文章标签： vue.js javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wsdnnnnnnnnn/article/details/140707635
版权

el-select下拉框样式无法修改

我在一个项目之中需要修el-select的下拉框，但是修改过程之中无论是通过  穿透，还是加!improtant都无法修改其下拉框的样式，查询之后得知不生效的原因可能是select的下拉框渲染过后不在#app上，需要用官方文档上面的popper-append-to-body修改

将popper-append-to-body设置为false之后，是可以修改的

设置popper-append-to-body为false之后，下拉框不显示

此时出现了一个问题就是我将该属性设置为false之后，下拉框不在页面内了，找不到了

打开f12选中元素找到下拉框得知，将popper-append-to-body设置为false之后元素多被position的fixed定位，而且top和left值设置的很大，

将position设置为absolute之后可以正常看到下拉框的显示，

小王讨厌洋葱
关注
  • 2
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
解决element ui select下拉框不回显数据问题的解决
10-17
在开发Vue.js应用时，Element UI是一个常用的组件库，提供了丰富的UI组件，其中包括`el-select`下拉选择框。然而，在实际使用过程中，有时会遇到`el-select`无法正确回显已选择数据的问题。本篇文章将深入探讨这个...
Element el-select 选择器(下拉框)详解
程序员大阳
08-08 8万+
本文目录1. 用途2. 数据绑定2.1 固定选项2.2 选项绑定数组3. 功能效果3.1 可清空选项3.2 多选3.3 可搜索4. 事件响应5. 小结 1. 用途 el-select即选择器，用于从若干个候选项中选择其中一个(或者多个)。 在传统网页开发中，选择器经常被称作下拉框、下拉列表，是最常用的表单元素之一。 2. 数据绑定 el-select的数据可以来源于固定的若干个选项，或者通过v-for绑定一个数组。 2.1 固定选项 固定选项时，选中项的value与selectedValue双向绑定。 数
详细分析Element中的el-select（附代码）
码农研究僧的博客
02-29 7084
el-select 是 Element UI 中的一个选择器组件，用于提供下拉框选择功能
Element组件 el-select设置滚动条+滚动加载(两种写法: 原生Js和自定义指令)
最新发布
weixin_46022934的博客
05-16 1361
敬请期待(2024-05-16 23:55)使用自定义指令和usehooks写法的功能出现;希望自己的写法可以帮助到遇到问题的人。有不足之处,或者可以优化的地方,欢迎大家给出自己的建议，会从大家的建议中汲取营养，提升自己!!!
Element-UI中Select选择器讲解（el-select详解）
热门推荐
辰兮要努力
11-22 9万+
本篇整理了el-select相关组件的基础用法，也正是这个组件，让我更加喜欢vue，更加喜欢element-ui，欢迎阅读学习，分享获取新知，大家一起进步。
vue中elementUi的el-select同时获取value和label的三种方法
PJL13411055804的博客
10-31 3万+
本文介绍了在vue中el-select想要同时获取value和label的三种方法
el-select 下拉框全选、多选的几种方式组件
m0_67841039的博客
10-19 1万+
el-select 下拉框全选、多选的几种方式组件
Vue + Element-ui的下拉框el-select获取额外参数详解
10-14
在Vue.js框架中，Element-ui库提供了一套丰富的UI组件，其中包括用于创建下拉框的`el-select`组件。在实际开发中，我们可能需要在用户改变选择时获取额外的信息，比如当前行的数据或者自定义的属性。本文将详细介绍...
element-ui 远程搜索组件el-select在项目中组件化的实现代码
10-15
Element-UI的`el-select`组件是用于创建下拉选择框的，它提供了丰富的功能，包括远程搜索（remote search）。远程搜索在大型数据集或动态获取数据的情况下非常有用，因为它只在用户输入时向服务器请求数据，提高了...
Vue中el-form标签中的自定义el-select下拉框标签功能
10-15
在Vue.js框架中，`el-form` 是Element UI库中用于创建表单的组件，它提供了丰富的表单处理功能，如验证、响应式布局等。`el-select` 是`el-form` 中常用的组件，用于创建下拉选择框，用户可以在预设的选项中进行选择...
vue中使用el-select选择器组件,基础组件用法和多选组件搭配使用
多看书少吃饭的博客
06-28 1万+
vue中使用el-select选择器组件,基础组件用法和多选组件搭配使用
VUE的el-select下拉框基本用法
测试领域专家，多领域测试技术、管理、工具都略懂，略懂一二
07-18 1万+
默认选中第几项this.formInline.stationName[0].station_Name和this.formInline.TestName[0].Name。你想获取当前选中了哪个，this.formInline.stationName.station_Name和this.formInline.TestName.Name。你想获取下拉框的所有内容，对应this.formInline.stationName和this.formInline.TestName。...
【Element】el-select下拉选择器搜索选项，自定义搜索方法，结合后端接口远程搜索
coderYYY的博客
03-20 2万+
el-select下拉选择器搜索选项，自定义搜索方法，结合后端接口远程搜索
封装el-select，实现虚拟滚动,可单选、多选、搜索查询、创建条目
金乌的博客
05-18 7168
表单中某下拉框，由于数据过多，选择的时候会因为数据量过大导致页面卡顿，于是对于el-select进行二次封装，实现虚拟滚动。看起来是加载了全部数据，实际上只加载了自己设定的10条（可修改）数据。concatSymbol 拼接 label 和 value 的符号。isConcat 是否拼接 label 和 value。isRight 是否右边显示value（code）值。二、el-option-node.vue。三、utils index.js。Step2： 创建两个文件。一、Select.vue。
el-select入门学习
qq_40765784的博客
05-16 3801
学习内容 1.el-select配合el-option使用 2.局部禁用和整体禁用 3.可清除内容关键字clearable 4.自定义下拉列表框 5.el-option-group和el-option配合使用(相当于两个for循环) 6.开启查询下拉列表功能关键字filterable 7.远程搜索（难点） 8.多选关键字multiple，创建选项allow-create 代码效果图 代码 <!DOCTYPE html> <html lang="en"> <head>
el-select 实现多选和全选
sby_163的博客
04-20 1万+
实现效果： 打开页面时默认全选 代码： <template> <div> <el-form ref="form" label-width="80px" :model="test"> <el-row :gutter="20"> <el-col :span="6"> <el-form-item label="测试"> <el..
vue el-select默认值
weixin_42574985的博客
10-21 8850
问题：看到网上很多说直接改el-select绑定的v-model的值，这样做就会掉入select框中仅仅是显示相应的文字而已（可根据el-select选中的状态来判断，选中后点开下拉列表为蓝色加粗字体），这样就会导致初始化的页面中，需要根据省份选项才能展示的城市选项直接显示无数据状态。情景：在调取接口后渲染数据时需要将选取的select设为默认值，具体案例为调取省份数据后，根据省份获取其对应的城市数据，并将其对应的el-select默认选中该数据的状态。
Element——el-select多选器
拾柒唸的博客
08-28 6993
Element的el-select的多选功能详解
el-select 下拉输入搜索
keke11211的博客
05-05 6317
el-select 下拉输入搜索
el- select下拉框样式
09-13
el-select 是 Element UI 中的下拉框组件，可以通过设置样式来自定义其外观。 下面是一些常见的自定义样式方法： 1. 修改下拉框的宽度： 可以通过设置 el-select 的 width 属性来调整宽度，例如： ```html <el-select width="200px"> <!-- options --> </el-select> ``` 2. 修改下拉框的高度： 可以通过设置 el-select 的 size 属性来改变下拉框的高度，例如： ```html <el-select size="small"> <!-- options --> </el-select> ``` size 属性可选值为 "large", "medium", "small" 或者不设置。 3. 修改下拉框的颜色： 可以通过设置 el-select 的 popper-class 属性来自定义下拉框的样式类，然后在 CSS 中定义相应的样式，例如： ```html <el-select popper-class="my-custom-class"> <!-- options --> </el-select> ``` 然后在 CSS 中定义 .my-custom-class 类的样式： ```css .my-custom-class .el-select-dropdown { background-color: #f0f0f0; } ``` 这只是一些简单的自定义样式示例，你可以根据需要进一步调整 el-select 的样式。此外，Element UI 还提供了一些属性和事件用于更多的自定义和交互，你可以查阅 Element UI 的文档以获取更多信息。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值