element-ui中的scrollbar组件使用

最新推荐文章于 2024-08-15 09:43:14 发布
最新推荐文章于 2024-08-15 09:43:14 发布
阅读量1.9k 收藏
点赞数
分类专栏： vue 文章标签： vue element scrollbar
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/sunqy1995/article/details/88362423
版权
本文介绍了Element-UI中的scrollbar组件，这是一个虚拟滚动组件。虽然未在官方文档中详细说明，但仍然可以正常使用。文章详细列出scrollbar组件提供的7个props属性，并提醒读者，若要实现高度动态变化，可在组件外包裹一层元素进行配置；如需隐藏横向滚动条，可以通过调整CSS样式来实现。
摘要由CSDN通过智能技术生成

简介

scrollbar是element-ui中的一个虚拟滚动组件，只是在文档中并没有写出来，也是可以正常使用的

使用

scrollbar组件暴露了 native, wrapStyle, wrapClass, viewClass, viewStyle, noresize, tag 这7个 props属性

props: {
   
    native: Boolean,  // 是否使用本地，设为true则不会启用element-ui自定义的滚动条
    wrapStyle: {
   },  // 包裹层自定义样式
    wrapClass: {
最低0.47元/天 解锁文章
sunqy1995
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
elementUi滚动条的使用及设置滚动条一直显示
haogemr的博客
04-27 1万+
elementUi滚动条的使用及设置滚动条一直显示
基于 vue 的elementui的无限滚动组件111.txt
04-20
基于 vue 的elementui的无限滚动组件，全局引入elementui，代码简单易懂，参数少适合理解
【区分vue2和vue3下的element UI InfiniteScroll 无限滚动组件，分别详细介绍属性，事件，方法如何使用，并举例】
xiejunlan的博客
07-17 727
需要澄清的是，在 Element UI（Vue 2）和 Element Plus（Vue 3 的 Element UI 官方替代品）中，并没有直接名为的无限滚动组件。然而，Vue 社区和 Element UI/Plus 的用户经常通过结合 Vue 的指令（如，这通常是一个第三方库如提供的）或者自定义组件来实现无限滚动的功能。不过，为了回答你的问题，我将分别介绍在 Vue 2 和 Vue 3 环境下如何结合一个假设的无限滚动功能（可能通过第三方库如）和 Element UI/Plus 组件库来实现无限滚动。
element-ui 滚动条 Scrollbar
qq_36800701的博客
03-17 270
element-ui有一个隐藏的组件，官方文档没有给，不知道什么原因，但是可以用 如下代码 <template> <div id="app"> <el-scrollbar class='page-component__scroll'> <router-view /> </el-sc...
使用 element-ui 隐藏组件 el-scrollbar 美化滚动条
qq_45745643的博客
05-26 3832
嘻嘻，抽空出个教程，这个我也是看别人的文章学来的哈哈 拿element-ui官网的这个container布局容器做例子吧，当我们展开所有条目的时候，右侧就会出现浏览器自带的滚动条，而且这个滚动条还会把左边的上下箭头挤过去…说白了就是会占间距，虽然还看得过去…但是给别人的感觉就很low 然后我们再把鼠标移动到官网左侧的列表栏，就能看到element-ui自带的滚动条啦，很好看吧 那么我们怎样才能用上这个滚动条呢，教程开始！ element-ui是有这个组件的， <el-scrollbar>&l
UI控件- > Scroll Pane(滚动面板)
Unyielding will
11-04 1204
package javafxui; import javafx.application.Application; import javafx.geometry.Orientation; import javafx.scene.Scene; import javafx.scene.control.ScrollBar; import javafx.scene.layout.Pane; import
[element-ui] el-select，虚拟滚动（vue-virtual-scroll-list）
qq_14993591的博客
07-18 2951
一、问题描述表单中某下拉框，由于数据过多，选择的时候会因为数据量过大导致页面卡顿，于是对于el-select进行二次封装，实现虚拟滚动。二、实现如下：看起来是加载了全部数据，实际上只加载了自己设定的10条（可修改）数据。
关于element-ui的隐藏组件el-scrollbar的使用
12-11
虽然在官方文档中没有给出这个组件，但是在源码中是有的。所以我们可以直接使用： <el></el> 但是我们需要微调一下样式，两种情况的演示代码如下： 已知内容高度 <el class='page-component__scroll'> <...
Element-ui之ElScrollBar组件滚动条的使用方法
10-18
为了在 Vue 项目中使用 Element-ui 的 ElScrollBar 组件，首先需要安装 Element-ui 并进行组件注册。然后，可以在模板中通过自定义指令的方式引入 ElScrollBar 组件。以下是一个使用 ElScrollBar 组件的基本示例： ...
Element-ui中元素滚动时el-option超出元素区域的问题
10-16
总的来说，解决Element-ui中el-option超出元素区域的问题需要理解其组件的工作原理，并可能涉及到对源码的深入研究以及自定义事件监听和处理。通过调整组件状态、监听滚动事件以及可能的CSS优化，可以有效地解决这个...
elementUI中的 el-table 实现虚拟滚动
Hyanl的博客
03-02 7370
解决该问题主要是用虚拟滚动的思路。引发页面卡顿的原因主要是由于数据量太大导致渲染的 dom 较多，然后页面就卡顿了。使用了 elementUI 中的 el-table 组件，不使用分页，当表格数据过多时导致页面卡顿；下面使用 element 中的 el-table 实现一下虚拟滚动来解决这个问题。
ElementUI滚动视图（类似走马灯）
qq_39211165的博客
05-18 2853
描述 项目中使用到了 NavMenu 导航菜单 ，当菜单过长时会发生不雅观的事情（换行） 正好 Tabs 标签页 能够检测宽度不够时会出现一个支持内容左右滚动的容器 于是乎，我将其抽取出来作为 NavMenu 导航菜单 的外部容器 效果 当宽度不够时，是滚动而不是换行； 当宽度足够时，左右箭头隐藏无多余元素； 使用 我已经将此封装成组件。 slot： 插槽 、props width：外层宽度限制（默认100%）； 插槽要求有固定宽度 如果使用了 NavMenu 导航菜单，由于它是使用 ul li 元素通过
Vue 3 + Element UI Plus 实现 Select 下拉框的虚拟滚动效果详解与代码示例
pleaseprintf的博客
08-22 2691
在 Vue 3 项目中，当下拉框中的选项过多时，使用虚拟滚动可以提升性能和用户体验。本文将介绍如何使用 Vue 3 和 Element UI Plus（el-select-plus）组件实现 Select 下拉框的虚拟滚动效果，并提供详细的代码示例。通过本文，你已经了解了如何在 Vue 3 项目中使用 Element UI Plus 实现 Select 下拉框的虚拟滚动效果。虚拟滚动可以提升页面性能，特别是在选项较多的情况下。希望本文对你实现虚拟滚动效果有所帮助。如果你有任何问题或疑问，欢迎留言讨论。
el-table实现虚拟滚动 | 一篇讲清什么是虚拟滚动，该如何实现 | Vue2 | ElementUI
x1145540679的博客
03-04 4651
一篇搞定虚拟滚动，小白也能看懂的文章
Element UI【详解】el-scrollbar 滚动条组件
最新发布
yang295242361的博客
08-15 1844
Element UI【详解】el-scrollbar 滚动条组件 —— 监听滚动条的滚动，跟随页面一起滚动，获取滚动距离，隐藏水平滚动条等
Element-ui之ElScrollBar组件滚动条的使用
热门推荐
前端江湖
04-25 8万+
在使用vue + element-ui 搭建后台管理页面的时候，做了一个头部、侧栏、面包屑固定的布局，导航栏和主要内容区域当内容超出时自动滚动。原来是采用优化浏览器样式的方式，对滚动条进行样式调整。但这个方法并不兼容火狐浏览器，在火狐访问时依然是浏览器默认的滚动条样式。在查看element文档时发现页面滚动条很精致，于是产生了灵感：能否使用element使用的滚动条组件呢？带着这个问题我们看这篇文章。
element-ui中的el-scrollbar,操作滚动条
yiyueqinghui的博客
04-30 1万+
<template> <div id="test" style="height:500px;"> <el-scrollbar style="height:100%" :wrap-class="wrapClass" :wrap-style="wrapStyle" :view-class=...
el图片滚动_Vue的el-scrollbar实现自定义滚动
weixin_39999025的博客
01-11 410
为什么要用el-scrollbar？最近在写一个内部平台系统，相信大家都知道，其中会有很多自定义的滚动区域，就比如说现在有一个列表需要滚动，第一个念头就是用 overflow: scroll; 啊！嗯嗯，又不是不能用！如果我不曾见过太阳，我本可以忍受黑暗。大家总会见过不少滚动条比较优雅的实现，不可否认，美是让人愉悦的。所以这些年行走江湖我满怀愧疚，让大家见丑了。为什么要用el-scrollbar，...
element的隐藏组件滚动条el-scrollbar使用 亲测有用~
JCat的博客
04-25 5万+
前言 刚好项目里面一直在使用的都是element，因为原生的滚动条太丑了，发现elementui中有个隐藏的组件，优化滚动条样式。亲测可用，鼠标经过的时候才会显示，简单美观。 正文 首先全局引入element，import ElementUI from 'element-ui'; 简单使用–只是用竖的滚动条 只是用竖的滚动条，外层box设置宽高，内层的内容充满，设置el-scrollbar的高度...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

sunqy1995

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

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

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

打赏作者

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

抵扣说明：

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

余额充值