我考虑的,首先项目用的框架是Vue,然后用的组件库是Element,Element官网也有很多滚动,而且像是Select组件的下拉框也是有滚动的,所以就不用想选择什么了,简简单单的就用Element自己的scrollbar吧,也不用再引入什么别的包或者文件之类的。 看Element的官网是不可能发现Scrollbar这个组件的,没有使用文档,但是可以直接使用。
这里涉及到两个Dom元素,类名分别为el-table__body-wrapper、el-table__body通过观察发现横向滚动条在于el-table__body-wrapper上,el-table__body则是实际的列表内容,当el-table__body宽度超出el-table__body-wrapper时就会出现横向滚动条。 因此只需要动态的修改el-table__body-wrapper的height即可实现想要的效果。
了解element-ui中的CSS变量,通过修改相应的CSS变量来改变滚动条的样式。具体可通过以下步骤实现: 在项目中引入element-ui主题文件,即element-variables.scss文件。 打开该文件,找到滚动条的相关变量,如$scrollbar-background-color等。 修改变量的值,可以通过在线编辑工具或本地编辑工具进行修改。
1.滚动条设置: <el-scrollbarstyle="height:100%;">...</el-scrollbar> 默认会同时出现水平和垂直两个方向的滚动条,想要隐藏水平方向的滚动条可以设置如下: .el-scrollbar .el-scrollbar__wrap { overflow-x: hidden; } 2.分页: <el-pagination background @current-change="handleCurrentChange" @size-...
在el-menu或者el-dropdown-menu组件中定义选项列表,并通过style属性设置高度和宽度,使得选项列表会显示滚动条。最后,通过v-if等方式控制下拉列表是否展开。|在el-select标签中加入<template slot="dropdown">,在其内部使用el-scrollbar组件包裹一个el-menu或el-dropdown-menu组件即可,记得设置好高度和宽度,使得列表...
right: 5px!important; // 竖向滚动条宽度 height:100%; } 下方间隙样式: /deep/ .el-table__fixed { height: auto!important; bottom: 5px!important;//横向滚动条高度}/deep/ .el-table__fixed-body-wrapper { max-height: calc(100% - 36px) !important;//36px是设置的列表统一行高bottom:0!impo...
element-ui下拉框el-select多选出现滚动条闪现 弹窗组件中放置了el-select下拉框组件,多选项较多时,聚焦弹出下拉选择框时,下方会出现一个横向滚动条闪现一下,虽然不影响使用,但是作为一个追求完美的码农肯定是受不了的。 原因 通过不懈的努力终于发现了原来是组件右侧的箭头图标旋转动画旋转时造成的页面布局被撑开。
1 打开电脑，找到项目工具，启动项目，如下图：2 进入列表页面，右侧出现滚动条，点击新增，发现右侧滚动条，隐藏，页面抖动，很不友好，如下图：3 这个时候该怎么去解决这个样式呢，找到”main.js“，入口文件，如下图：4 我们使用的element ui 已经引入，配置一下，这个值：import ElementUI from 'element...
无意间发现element官网有这么一个滚动条效果,之前在一个需求上想做这样的效果,碍于当时脑筋短路没实现。感觉像是通过active或者focus触发显示滚动条,查看html后发现确实是通过active出触发。且它这样式很规整,就怀疑是不是有写好的组件。 查看了element代码后发现确实有这么个组件,只是没有在官网API上声明,目前发现只...
如这篇文章所写: 最终解决方法如下:1、在对应的vue文件里,先设置最外层的大div的class名为 admin_wrapper2、在需要改变的vue文件里,书写局部样式 注...