Vue使用element.js的级联选择器高度不正常，如何解决高度溢出问题？

最新推荐文章于 2023-06-17 23:19:18 发布
最新推荐文章于 2023-06-17 23:19:18 发布
阅读量906 收藏 2
点赞数 2
文章标签： vue.js css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/FanShirley/article/details/104710591
版权

问题使用element.js 的级联选择器出现高度溢出问题，在全局css中添加代码，必须是全局css文件中添加。

.el-cascader-menu {
height: 250px;
}在这里插入图片描述这样问题就解决啦在这里插入图片描述
以后要将遇到的问题都记录下来！

FanShirley
关注
  • 2
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
Element-ui的级联选择器高度和内容显示错误
weixin_44202529的博客
07-03 573
在使用Element-ui写项目的时候，使用到里面的一个叫Cascader 级联选择器的组件。 这个组件正常的效果是这样的： 1.x版本的级联选择器的代码如下： <div class="block"> <span class="demonstration">hover 触发子菜单</span> <el-cascader expand-trigger="hover" :options="options" v-model="select
Vue+element.js使用心得.md
05-08
从构建到开发到应用有个初步的流程，适合初学者使用，包含①：前期准备工作，②创建-》打包项目③集成Element
element-ui级联选择器选项菜单高度溢出和位置偏下的问题
ccc2903989297的博客
11-17 475
在做黑马后台项目时，使用element-ui的级联选择器遇到了一些问题 这里是el-cascader新旧版本不兼容出现的问题，在全局css中添加这样一个样式 ```javascript .el-cascader-menu{ height: 280px; } 添加了这个样式之后，解决了高度溢出的问题，又出现一个选项菜单位置偏下的问题 经过控制台调试，发现，在全局css样式加上如下代码即可解决问题 .el-cascader[data-v-90a0ced0]{ height: 50px;
**vue，element.ui组件很容易忽略的坑---------------级联选择器中的小bug**
zc135565的博客
09-16 1540
vue，element.ui组件很容易忽略的坑---------------级联选择器中的小bug 前一段时间在使用vue2x版本进行电商后台的重构时发现的此版本的小bug，虽然不算什么大事，但对用户体验和页面美观还是有一定的影响的，在此分享给各位朋友； 在element组件的级联选择器中的Hover触发级联选择器的使用中出现问题， element 2.12版本中的选择器，在一定的数据量下，显...
js表格css高度自适应高度,表格内容宽度变化iframe高度自适应JS完美解决办法
weixin_30019517的博客
08-03 599
JS自适应高度，其实就是设置iframe的高度，使其等于内嵌网页的高度，从而看不出来滚动条和嵌套痕迹。对于用户体验和网站美观起着重要作用。如果内容是固定的，那么我们可以通过CSS来给它直接定义一个高度，同样可以实现上面的需求，当内容是未知或者是变化的时候，这个时候下面的代码就有用了。function reinitIframe(){var iframe = document.getElementBy...
解决级联选择超出屏幕问题
hzw的博客
09-07 483
问题描述： 在做Vue电商后台管理系统时，级联选择器超出屏幕，呈现如下图所示 解决方法 在 global.css 文件中，添加一则代码： /* 解决级联选择器超出屏幕 */ .el-scrollbar__wrap { height: 200px; } 欢迎补充 ~~ ...
基于vue2.0实现的级联选择器
01-19
基于Vue的级联选择器，可以单项，二级， 三级级联，多级级联 web开发中我们经常会遇到级联选择器的问题，尤其是在表单中,无外乎几种情况： 单个级联 (下拉选择框，单选) 单个级联 (多项选择) 二级联动 （省份...
vue.js element-ui validate中代码不执行问题解决方法
10-18
然而，在实际使用中，我们可能会遇到validate方法不执行的问题，导致表单验证无法正常工作。本文将深入探讨这个问题及其解决方案。 首先，Element UI 的 `el-form` 组件使用 `prop` 属性绑定需要验证的字段，并通过...
Vue+ElementUI 中级联选择器Bug问题的解决
11-19
然而，使用过程中可能会遇到一些问题，本文将深入探讨一个关于级联选择器出现Bug的情况及其解决方案。 问题描述： 当后端返回的数据采用递归方式构建，与ElementUI的级联选择器内部的递归机制相冲突时，可能会导致...
element-ui dialog对话框底部按钮超出对话框bug
最新发布
qq_61267719的博客
06-17 477
今天突然发现element-ui的对话框底部按钮超出了对话框，属性可以解决，具体原因暂时不清楚，不知道怎么父元素高度减半了。检查后发现是子元素超出了父元素。经过尝试后发现给父元素加上。
el-dialog嵌套组件使用，组件内容超出高度
青春不打烊的博客
06-11 4277
第一种解决方式： 定义样式 .abow_dialog { display: flex; justify-content: center; align-items: Center; overflow: hidden; .el-dialog { margin: 0 auto !important; height: 90%; overflow: hidden; .el-dialog__body {
Vue+Element-UI el-dialog
ifmushroom的博客
10-07 999
我们公司的前端项目都用vue+element-ui，然后像新增、编辑页面都用el-dialog弹框。我也不知道为啥都要用这个，上班快三个月了，至今我做的项目都还没涉及父子组件。emmm，咱也不敢说，咱也不敢问。问就是按照公司已有的框架走速度更快。 然后呢，我就发现一个问题，如果el-dialog弹框内容过多，页面就会很长，当你第一次拉到下面，没拉回去，点击了关闭，下一次你再点击进来会发现它依旧在下面。。毫无疑问这样的用户体验贼差。 其实在标签中加上属性： losk-scroll=‘false’ 和 a
vue项目中使用elementUI分页的遇到的问题
前端_大可爱的博客
02-04 1299
点击 查看计划表安排表 出现对话框 数据 数据显示要求 如果信息条数多余50则显示分页 进行数据展示 本人出现的问题 ：当点击专业1弹出的对话框时 显示时看到第二页，返回查看其他专业的计划安排表时分页高亮在第2页 解决办法： 给el-pagination添加一个v-if条件判断，首先设置为false，隐藏掉页码，在数据请求时判断信息条数是否多余50条 是则改为true，这样el-pagin...
Element UI中el-dialog中内容超出自定义滚动条
weixin_57246351的博客
04-28 831
参考以下网址 自定义滚动条
(Dialog)解决：Element-ui 中 Dialog 弹出对话框的样式的修改问题
狮子座的男孩
07-19 1万+
代码】解决Element-ui中Dialog弹出对话框的样式的修改问题。
Vue根据浏览器窗体变化动态设置Element Table组件的最大高度
大家好，我是 ed.
11-03 2845
Vue根据浏览器窗体变化动态设置Element Table组件的最大高度 这个场景应该经常遇到，比如说在一个页面有一个table，想让他数据过多的时候自动出现滚动条而不至于冲到屏幕外被隐藏，如果表格下面还有换页的话，换页直接冲没了，所以需要计算这个table表格的最大高度。 使用的是饿了吗Element组件库的table组件，有一个属性是 max-height ，设置表格的最大高度，高出自动出现纵向滚动条。 <el-table :data="dataList" :max-height="m
easyui 解决dialog窗口超出父窗口。导致不能拖动与关闭
Gavid的博客
06-27 1399
目录问题描述问题解决方法问题解决实践相关代码 问题描述 今天做项目遇到父窗口调用diolog对话框时，出现diolog窗口的上边拖动和关闭部分超出了父窗口，导致不能拖动和关闭。 问题解决方法 针对panel window dialog三个组件拖动时会超出父级元素的修正； 如果父级元素的overflow属性为hidden，则修复上下左右个方向； 如果父级元素的overflow属性为非hidd...
Element UI Dialog 对话框改成固定高度，超出部分滚动条滚动
热门推荐
weixin_44702139的博客
05-19 1万+
问题描述 elememt ui 中的el-dialog对话框如果内容过多高度会被无限拉长。要将其设置成固定高度，此处我设置的是页面总高度的80%，内容过多时在对话框内出现滚动条，具体代码如下： 但是这样设置会造成高度不能根据内容自适应，始终是80% // 内容 <template> <el-dialog :title="title" :visible.sync="dialogVisible" class="showAll_dialog"
解决ant design vue中table表格内容溢出后，设置的width失效问题，超出的字用省略号代替
sinat_34241861的博客
04-16 1万+
style.css 通过设置css样式，可实现溢出内容以…代替，其中max-width的设置很重要，必须有 /*统一table表格的尺寸*/ .ant-table{ table-layout: fixed; } .ant-table-tbody > tr > td { max-width: 200px; min-width: 70px; border-bottom: 0...
Vue使用Element的级联选择器Cascader，如何解决组件内滑动不跟随问题
05-30
在Element的级联选择器Cascader中，如果您希望当用户在组件内滑动时，下拉列表能够跟随滚动，则需要为Cascader添加`popper-class`属性，并在该属性中设置一个CSS类名，在该CSS类中设置下拉列表的最大高度和最大宽度...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值