el-select下拉框高度有效设置不污染

简介: el-select下拉框高度有效设置不污染

前几天一个月薪35k的兄弟,给我推了一个人工智能学习网站,看了一段时间挺有意思的。包括语音识别、机器翻译等从基础到实战都有,很详细,分享给大家。大家及时保存,说不定啥时候就没了。

el-select下拉框高度有效设置不污染

el-select下拉高度设置,然后添加垂直滚动,这个给我坑了半天。加scoped加/deep/,不管用。不加scoped,加父类,其实就不显示父类,有的话父类还是一个全局的#app,不加父类还会污染全局,网上查了很久,乱七八糟的都不管用。最后,直接上代码。

解决

<template>
  <div>
    <el-select v-model="value" placeholder="请选择" size="mini" @change="change" multiple>
      <el-row class="blRow">
        <el-col>
          <el-option v-for="(item, inx) in reList" :key="inx" :label="item.name" :value="item.type"></el-option>
        </el-col>
        <el-col class="btnRow">
        <div class="btn" @click="clickFn">提交分类</div>
        </el-col>
      </el-row>
    </el-select>
  </div>
</template>

说明

就是在el-option外面加一个包裹的盒子,div也可以,他就会直接在ul下面添加一个拥有类名的盒子,我们可以通过控制这个盒子来调整下拉的宽高。宽度也可以通过这个方法,或者控制padding来调整宽度。

目录
打赏
0
0
0
0
19
分享
相关文章
解决el-descriptions的label-class-name不生效问题
解决el-descriptions的label-class-name不生效问题
1368 0
Element el-select 选择器(下拉框)详解
本文目录 1. 用途 2. 数据绑定 2.1 固定选项 2.2 选项绑定数组 3. 功能效果 3.1 可清空选项 3.2 多选 3.3 可搜索 4. 事件响应 5. 小结
6730 0
Element el-select 选择器(下拉框)详解
|
11月前
|
使用小技巧实现el-table组件的合并行功能,ElementUI和ElementPlus都适用
本文介绍了在ElementUI和ElementPlus中使用`el-table`组件实现合并行功能的技巧,包括多列合并和单列合并的方法,并提供了相应的示例代码和运行效果。
7458 1
使用小技巧实现el-table组件的合并行功能,ElementUI和ElementPlus都适用
Vue3报错:Extraneous non-props attributes (style) were passed to component but could not be automatical
Vue3报错:Extraneous non-props attributes (style) were passed to component but could not be automatical
4524 1
|
10月前
elementUI使用Pagination分页组件增加自定义slot
本文介绍了如何在Element UI的Pagination分页组件中使用自定义slot。通过在`el-pagination`标签内的适当位置添加slot内容,可以在分页组件中插入自定义的HTML或组件。文章提供了一个示例代码,展示了如何添加两个自定义slot,并展示了最终效果。
1042 4
elementUI使用Pagination分页组件增加自定义slot
Element UI & Element Plus之改变表格单元格颜色
这篇文章展示了如何在Element UI和Element Plus框架中使用`:cell-style`属性来根据条件改变表格单元格的颜色。
975 0
Element UI & Element Plus之改变表格单元格颜色
成功解决:el-dialog弹出窗口、数据第一次没有加载、第二次打开才能加载数据。(每次页面刷新后、第一次打开dialog窗口、图片数不加载)
这篇文章分享了解决Vue中`el-dialog`弹出窗口在第一次打开时数据未加载问题的技巧,通过改变组件的`key`属性来强制Vue重新渲染DOM,从而确保数据正确加载。
成功解决:el-dialog弹出窗口、数据第一次没有加载、第二次打开才能加载数据。(每次页面刷新后、第一次打开dialog窗口、图片数不加载)
el-dialog使用::v-deep()穿透设置样式不生效,解决办法亲测有效!
el-dialog使用::v-deep()穿透设置样式不生效,解决办法亲测有效!
AI助理

你好,我是AI助理

可以解答问题、推荐解决方案等

登录插画

登录以查看您的控制台资源

管理云资源
状态一览
快捷访问