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来调整宽度。

目录
相关文章
|
7月前
div高度设置100%无效的问题
div高度设置100%无效的问题
74 1
|
11月前
隐藏el-table-column过多的内容并进行浮窗展示
隐藏el-table-column过多的内容并进行浮窗展示
隐藏el-table-column过多的内容并进行浮窗展示
|
10月前
element-plus:el-table自定义展开图标处于列的位置
element-plus:el-table自定义展开图标处于列的位置
358 0
|
10月前
|
JavaScript
Vue表格显示问题:v-show无法影响el-table-column列的解决方案
Vue表格显示问题:v-show无法影响el-table-column列的解决方案
277 0
|
8月前
|
JavaScript
element-UI el-table动态显示隐藏列造成固定一侧的列(fixed=“left/right“)错误显示
问题原因:多个tabs共用一个实体,动态显示隐藏列 出现了固定在右侧的列(fixed="right")错位 【解决方案】 表格的重新布局,只要table数据发生变化的时候就重新渲染表格 ```js this.$nextTick(() => { this.$refs.formname.doLayout() }) ``` 参考element官方文档 ![请在此添加图片描述](https://developer-private-1258344699.cos.ap-guangzhou.myqcloud.com/column/article/5877188/20231030-e40
139 0
element-UI el-table动态显示隐藏列造成固定一侧的列(fixed=“left/right“)错误显示
|
1月前
el-select如何自定义下拉选项框的宽度
el-select如何自定义下拉选项框的宽度
258 0
|
7月前
通过select下拉框里的value控制div显示与隐藏
通过select下拉框里的value控制div显示与隐藏
45 0
|
8月前
element-ui里的el-table在grid布局下切换数据有滚动条时不断增加?
element-ui里的el-table在grid布局下切换数据有滚动条时不断增加?
38 0
|
9月前
|
JavaScript
el-select下拉多选框 el-select 设置默认值不可删除功能
Element-UI是一款广泛使用的Vue.js组件库,其中El-Select下拉多选框组件在实际项目开发中经常被使用。然而,在Element 3.0版本中,El-Select下拉多选框默认值可被删除,这可能会导致一些意外情况。本文将介绍如何解决这个问题,实现El-Select下拉多选框设置默认值不可删除的功能。
326 0
el-select下拉多选框 el-select 设置默认值不可删除功能
|
11月前
|
缓存 JavaScript 前端开发
el-table 列的动态显示与隐藏
当我们在对表格数据查看的时候,可能某些列的数据是当前想要重点关注的,而某些列并不需要展示出来,我们就可以通过对表格的列进行实时的一个切换去实现动态的显示与隐藏。