Vue电商项目--记录(三)之解决el-cascader级联选择器无滚动条的问题

最新推荐文章于 2024-04-10 13:11:19 发布
最新推荐文章于 2024-04-10 13:11:19 发布
阅读量772 收藏 1
点赞数 3
分类专栏： web前端开发 -T 文章标签： vue.js javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/pakerder/article/details/125588625
版权

问题现象

跟着视频做项目的时候，用了el-cascader这个组件，发现出现了这个问题：

 视频里并没有这个问题，这就很痛苦了，网上搜了很多，但是没有有效的解决方案，然后我就自己打开了调试工具

 里面有一个el-crollerbar-wrap类，可以看到它的height是100%,会有问题，将其设置成具体的数值，比如250px，就可以解决这个问题了。

.el-scrollbar__wrap{
  height: 250px ;
}

将这一段代码写到整个项目的全局样式文件里，不要在组件的局部样式表里面写，否则会没有效果

码上游
关注
  • 3
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
Vue - 完美解决 Element UI 侧边导航菜单 ＜el-menu＞ 出现滚动条，去掉 Element 侧边导航组件的横纵滚动条（但滚动功能依然保留，仅仅是去掉 “滚动条“）100% 解决方案
王佳斌
03-27 6573
vue elementui 组件库的侧边栏出现滚动条，ElementUI侧边导航栏出现滚动条 如何去除，element-ui侧边导航栏有滚动条，Vue elementui中侧边栏滚动条隐藏，使用vue和element导航菜单去除的滚动条，element-ui侧边导航栏有滚动条，前端- 如何关闭elementUI左侧aside的滚动条，使用vue和element 导航菜单去除的滚动条，使用vue和element 导航菜单去除的滚动条，Vue elementui中侧边栏滚动条隐藏，Vue后台项目中如何去除左侧菜
Vue ElementUi导航组件结合后台管理实现左侧菜单滚动不显示滚动条
龘
01-30 1403
1、代码例 <el-aside :width="Iconflag ? '200px' : '0px'"> <el-row style="width: 100%"> <el-col> <div class="Text">后台管理系统</div> //导航外新包一个盒子，除了Text类盒子不滚动外，其余导航滚动，并不显示滚动条 <div class="Nav
el-cascader级联选择器无滚动条
mjjhen的博客
06-18 240
原因：组件里面有一个el-crollerbar-wrap类，可以看到它的height是100%。所以会将选择器整页显示，会有问题将其设置成具体的数值，比如200px，就可以解决这个问题了。
解决：el-select，el-cascader或el-date-picker的下拉框不随滚动条滚动。
qq_38969618的博客
06-22 5205
el-select下拉框不随滚动条滚动
Vue2结合el-cascader级联下拉获取当前选中的所有级别的id和label
最新发布
weixin_53339757的博客
04-10 662
Vue2结合el-cascader级联下拉获取当前选中的所有级别的id和label
el-cascader宽度限制，超出显示滚动条
九亿宅男的梦的博客
02-22 2008
【代码】el-cascader宽度限制，超出显示滚动条。
使用element-ui组件库中el-cascader和el-select组件时，下拉项不随页面滚动走的解决办法
yycnf的博客
02-02 2359
使用element-ui组件库中el-cascader和el-select组件时，下拉项不随页面滚动走的解决办法 1、el-cascader组件，添加:append-to-body="false" <el-cascader v-model="buildForm.companyAddress" :options="areaList" :append-to-body="false" clearable style="width: 100%" &gt
记录element ui NavMenu 导航菜单出现滚动条问题
qq_45994450的博客
05-26 1465
第二步、先用el-scrollbar标签将导航栏包裹起来（el-scrollba标签官网中无介绍但是源码中有，详情可以百度观看）第一步、先用el-aside标签将导航栏包裹起来，先按照官网配置导航栏，但是出现了滚动条。
Vue+element 动态生成导航栏方法（全）
无意义
08-18 1万+
动态生成的思路 1.通过对标签的循环遍历生成导航栏 2.通过导航栏自身的递归调用形成 1.循环遍历生成的方法 先判断是否有对应的二级菜单再进行对应的循环 用一个div标签包含在外层进行循环，里面用v-if判断是否含有children并执行对应 ...
解决vue中el-tab-pane切换的问题
10-15
主要介绍了解决vue中el-tab-pane切换的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
elp-cascader:基于'element-ui'和'vue-virtual-scroller'的Vue组件
05-28
elp-cascader Cascader based on 'element-ui' and 'vue-virtual-scroller'@vueblocks/elp-cascader基于element-ui和vue-virtual-scroller的级联选择器，用虚拟列表的方式逐级渲染列表。适用于数据量较大的场景。...
vue el-cascader所需要的省市区街道联动的数据格式
07-26
今天找到了大半天，没找到合适的 vue el-cascader 省市区街道4级联动的数据，并且支持维护修改的。 于是自己做了一个。 代码非常简单，重要的符合这个格式的数据，这就是我这个懂后端程序员的优势了。
vue使用keep-alive保持滚动条位置的实现方法
10-17
主要介绍了vue使用keep-alive保持滚动条位置的实现方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
vue电商项目-vue-shop.zip
11-04
vue电商项目-vue-shop
el-menu-item内容过多，不能滚动
qq_48294510的博客
05-19 4620
el-menu-item内容过多，不能滚动 问题描述 这里放了六张图片，只能看到最下面的部分，上面的部分被挤出了屏幕外面。 这里的弹出框是element ui组件自动生成的，即这个div 我此时有关这部分的代码如下 解决思路： 一开始是想抓住这个生成的div，修改这个div的样式试图让它可以滚动，虽然最后生成了滚动条，但却没法滚动。 之后就去找这个东西的源码，试图将组建底层的东西进行修改，修改掉生成div的样式，但最后没有找到，也就放弃了。 最后想到，既然不能对它这个div做改变，那为何不能自己加一
Elementui中El-menu导航栏
热门推荐
~~
06-09 1万+
el-menu官方文档：Element - The world's most popular Vue UI frameworkElement，一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库https://element.eleme.cn/#/zh-CN/component/menu 导航栏水平时去除底部白边： 注意：水平时去除底部白边是用的新添加的style标签实现的。其他方式不行，如用::deep，或者直接在原来的style中改，都不行 侧边栏展开时宽度：
vue + el-menu 实现菜单栏无限多层级分类
Ivan的编程随笔
07-03 1万+
思路：数据格式须为数组内部多层嵌套模式，利用递归渲染菜单栏数据实现菜单多层级分类。 1.模拟菜单数据，引入封装组件 <template> <div class="container"> <el-container> <el-header>Header</el-header> <el-container class="container-body"> <el-aside .
vue+elementUI实现动态渲染二级导航菜单列表
super码力的博客
08-09 3474
vue结合elementUI实现后台数据动态渲染二级导航菜单列表
el-menu动态渲染多级菜单
starstarstarl的博客
06-06 1372
子组件：根据菜单数组的结构自行修改pagePojoList，pageUrl，kid，name，及自定义图标。思路：创建子菜单递归组件，这里我命名为MySubMenu.vue。父组件：引用自定义组件MySubMenu，将菜单数组传递给子组件。
el-cascader级联选择器
08-16
C知道：el-cascader级联选择器是一个基于Element UI的组件，用于实现级联选择功能。它可以在多级选项中进行选择，并且支持自定义选项、异步加载选项、禁用选项等功能。 要使用el-cascader级联选择器，您需要在Vue组件中引入Element UI库，并在模板中使用el-cascader组件。以下是一个简单的示例： ```html <template> <el-cascader v-model="selectedOptions" :options="options" placeholder="请选择" @change="handleCascaderChange" ></el-cascader> </template> <script> export default { data() { return { selectedOptions: [], options: [ { value: '1', label: 'Option 1', children: [ { value: '1-1', label: 'Option 1-1', children: [ { value: '1-1-1', label: 'Option 1-1-1', }, { value: '1-1-2', label: 'Option 1-1-2', }, ], }, { value: '1-2', label: 'Option 1-2', }, ], }, ], }; }, methods: { handleCascaderChange(value) { console.log(value); }, }, }; </script> ``` 在上述示例中，我们使用`v-model`来绑定已选择的选项，`options`属性定义了级联选择器的选项列表。当选择发生变化时，`@change`事件会触发`handleCascaderChange`方法，并打印选择的值。 您可以根据自己的需求进行配置和使用el-cascader级联选择器。如果您有更具体的问题或需求，请随时提问。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

码上游

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值