vue3 element ui plus select框的高度如何搞定它

最新推荐文章于 2023-12-03 17:03:51 发布
最新推荐文章于 2023-12-03 17:03:51 发布
阅读量2.4k 收藏 1
点赞数 1
文章标签： vue.js 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_46402927/article/details/125541155
版权

开发中遇到了一个比较麻烦的事，就是我弹出框的大小是固定的，结果select的内容太多一下就挤出来了。刚开始解决思路是想着看能不能把弹出框给他设置一下hidden，结果尝试了不行的，原因是因为select的下拉框是设置了层级的这个办法行不通，那就从出问题根本来解决那就是把它的select的高度给它定一下，但是这个在做样式穿透的时候是不生效的，我放在了scope下面是不生效的。
废话不多说先上代码
在这里插入图片描述

这里给option添加一个父类这样给父类设置高度就可以了。如果给他设置一个高度就长这样了
在这里插入图片描述
这时候给他高度变成max-heigth就可以了
在这里插入图片描述
如果有更好的解决方式请多指教~

我是码农007
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
在vue+element ui框架里实现lodash的debounce防抖
10-16
在Vue.js和Element UI的开发中，有时候我们需要优化用户输入事件的处理，特别是对于实时搜索或过滤数据的情况。这时，lodash的`debounce`函数就能派上用场，它可以帮助我们实现防抖(debounce)功能，避免频繁触发昂贵...
ElementUI el-select 改变高度
最新发布
HDdgut的博客
06-19 372
给el-select加一个自定义类，这样不会影响其他的el-select，或是scoped，但是需要加/deep/修改 ElementUI el-select 高度，同时需要修改内部样式，否则下拉箭头会发生偏移。
element ui - el-select 手动设置高度
nunumaymax的博客
06-20 5035
当我们的页面想要手动设置 element ui 中 el-select 的高度时，如果只是通过设置 el-select 的 height 属性时，会发现调整无效。继续对 el-select 中的 input 元素 .el-input__inner 设置。会发现高度生效了，但是右侧的下拉框箭头移位了。如下提供一种可以调整。
Element-ui下拉框多选样式——宽高自适应
weixin_40400844的博客
09-27 4257
Element-ui下拉框多选样式——宽高自适应高度自适应宽度自适应 高度自适应 在element-ui的文档中可以看到，多选时，高度自适应是默认就有的展示方式，select组件不需要设置额外属性，如下图显示： <el-select class="select" v-model="value" multiple placeholder="请选择"> <el-option v-for="item in options" :key="item.value" :la
修改el-select下拉框的高度
热门推荐
ZMJ_QQ的博客
10-13 1万+
给el-select添加如下图红框中的两行代码。 <el-select @change="currentSel($event, key)" v-model="item.item_id" placeholder="请选择" clearable popper-cl..
vue中使用element-ui ，设置级联选择器高度问题
fallsTheDust的博客
05-06 3918
一、前言 我本来以为设置elemnt-ui组件样式需要用到深度选择器，然后找了好多关于深度选择器的，比如>>> /deep/ ::v-deep 后来才明白是权重不够，解决方法如下 二、设置高度方法 1、在全局css中设置 .el-cascader-menu{ height: 400px; } 缺点：所有级联选择器的高度都是固定的 结论：只有在所有页面级联选择器都一致的情况下或者只有一个级联选择器情况下使用这种方法 2、在使用级联选择器的页面单独设置 <style
elementUi——select选择框的下拉框样式调整——基础积累
yehaocheng520的博客
04-08 1万+
elementUi——select选择框的下拉框样式调整
vue+element 模态框表格形式的可编辑表单实现
10-16
在Vue.js框架中，Element UI库提供了一套丰富的UI组件，其中包括模态框（Modal）和表格（Table），这些组件可以方便地构建出各种交互式的用户界面。在本例中，我们将探讨如何利用Vue和Element UI来实现一个模态框内...
vue3Util:基于vue3 element-plus form表单二次封装
05-05
4. **Element Plus**：Element Plus是这个封装库依赖的基础组件库，它提供了诸如Form、FormItem、Input、Select等丰富的表单组件，Vue3Util可能在其基础上进行了定制和扩展，以适应更高级别的需求。 5. **Form表单...
Vue Element 分组+多选+可搜索Select选择器实现示例
12-04
实际就是将element三种官方select实例整合起来，同时实现分组+多选+可搜索，此外点击一级分组名可以实现全选/全不选。供有相关需求的开发者参考 准备工作： 除了vue脚手架、element等必要包之外。该项目还用到了...
解决element-ui里的下拉多选框 el-select 时,默认值不可删除问题
10-14
主要介绍了解决element-ui里的下拉多选框 el-select 时,默认值不可删除问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
element 的el-select标签 怎么实现下拉框的自适应
EnrichCheng的博客
12-03 1077
element 的el-select标签 怎么实现下拉框的自适应。
element-plus里面的Select 选择器设置高度
W78955的博客
06-13 966
.el-input__inner { height: 30px; }
Vue ElementUI el-select 改变高度
dongshuaiqi的博客
09-12 1637
【代码】Vue ElementUI el-select 改变高度。
el-select的下拉选项的高度、字体设置
qq_39989608的博客
04-11 6323
给el-option加个class <el-select v-model="productModelSelected" placeholder="产品型号"> <!-- 给el-option加个class--> <el-option class="select_item" v-for="item in productModelList"
element-ui中select下拉框添加分页以及更改下拉框高度
qq_41821445的博客
11-27 4857
在select中加入分页组件就可实现带分页的下拉框，如下图 此下是远程搜索 若在添加远程搜索需要添加以下代码，首先在select中添加以下属性，如上图 filterable remote :remote-method="remoteMethod1" 然后在方法中这样写 async remoteMethod(query) { console.log(query, 'query') if (query !== '') { this.queryForm1
Vue ElementUI el-select 自定义高度
weixin_41346436的博客
04-29 6751
小小的需求，却没有最好的解决办法，此处分析代码最少，最直观的办法，解决el-select自定义高度问题，文字颜色，边框，统统都可以自定义修改 直接上代码 就是用[ /deep/ ]这个属性，很给力 效果图 <div class="subjectleft"> <el-select v-model="value" placeholder="请选择" class="selsectbox"> <el-option
vue3 + element plus实战
10-10
Vue 3 是一个流行的 JavaScript 框架，用于构建用户界面。Element Plus 是一个基于 Vue 3 的组件库，提供了一套美观易用的 UI 组件。 要实战 Vue 3 和 Element Plus，首先你需要安装 Vue CLI 4 或更高版本。然后，你可以创建一个新的 Vue 3 项目并添加 Element Plus： 1. 安装 Vue CLI：运行以下命令安装 Vue CLI。 ``` npm install -g @vue/cli ``` 2. 创建新项目：在命令行中运行以下命令来创建一个新的 Vue 3 项目。 ``` vue create my-project ``` 然后选择 "Manually select features"，并确保选择了 "Babel" 和 "Router"。 3. 安装 Element Plus：进入项目目录，并运行以下命令来安装 Element Plus。 ``` cd my-project npm install element-plus ``` 4. 引入 Element Plus：在项目的入口文件（通常是 src/main.js）中，添加以下代码来引入 Element Plus。 ```javascript import { createApp } from 'vue' import ElementPlus from 'element-plus' import 'element-plus/lib/theme-chalk/index.css' createApp(App).use(ElementPlus).mount('#app') ``` 5. 使用 Element Plus 组件：现在你可以在你的 Vue 组件中使用 Element Plus 的组件了。例如，在一个组件中使用一个按钮组件的示例： ```vue <template> <el-button>Click me!</el-button> </template> <script> import { ElButton } from 'element-plus' export default { components: { ElButton } } </script> ``` 以上是使用 Vue 3 和 Element Plus 进行实战的基本步骤。你可以根据需要使用 Element Plus 的各种组件和功能来开发你的应用程序。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值