精华内容
下载资源
问答
  • Element UI 修改el-scrollbar 里面的 el-scrollbar__wrap
    千次阅读
    2020-07-15 15:59:09

    Element UI 修改el-scrollbar 里面的 el-scrollbar__wrap

    1.el-scrollbar的父层要有固定高度
    2.el-scrollbar的高度要设成100%
    3.如果出现横滚动条,请添加css(.el-scrollbar__wrap{overflow-x:hidden;})
    或者
    直接在<el-scrollbar wrapStyle="overflow-x:hidden;"></el-scrollbar>
    
    1. wrapStyle: {} | 子层style
    2. wrapClass: {} | 子层class
    3.viewClass:{} |  view层class
    4.viewStyle:{} |  view层style
    5.noresize:Boolean | 是否刷新滚动条大小
    
    更多相关内容
  • 为什么要用el-scrollbar? 最近在写一个内部平台系统,相信大家都知道,其中会有很多自定义的滚动区域,就比如说现在有一个列表需要滚动,第一个念头就是用 overflow: scroll; 啊!嗯嗯,又不是不能用!如果我不曾...
  • 虽然在官方文档中没有给出这个组件,但是在源码中是有的。所以我们可以直接使用: <el></el> 但是我们需要微调一下样式,两种情况的演示代码如下: ....page-component__scroll .el-scrollbar__wrap { ov
  • vue页面 <div style="height: 400px"> <el-scrollbar style="height: 100%"> <el-tree ref="tree" :data="list" node-key="id" :props="defaultProps

    vue页面

     <div style="height: 400px">
                <el-scrollbar style="height: 100%">
                  <el-tree
                    ref="tree"
                    :data="list"
                    node-key="id"
                    :props="defaultProps"
                    @node-click="handleNodeClick"
                    :default-expanded-keys="defaultexpanded"
                  ></el-tree>
                </el-scrollbar>
              </div>

    CSS

    <style>
    .el-tree>.el-tree-node{
      height: 350px; 
      min-width: 100%;
      display:inline-block;
    }
    </style>

    实现效果:

    展开全文
  • vue2-perfect-scrollbar Vue.js简约但功能强大的包装器,可完美显示滚动条 您在寻找与Vue3兼容的版本吗? 检查 为什么创建它? 因为我 :red_heart: 在我的项目中使用( :raising_hands: )。 也是因为github上的...
  • Vue页面<...</template>里部分相关代码。 ...el-scrollbar > <el-tree class="filter-tree no-select" :data="data" node-key="id" ref="tree"> </el-tree> </el-scr

    Vue页面<template lang="html"></template>里部分相关代码。

    示例代码:

    <div id="listTree" class="list-tree-div">
    	<el-scrollbar >
    		<el-tree class="filter-tree no-select" :indent="10" :data="data" node-key="id" ref="tree">
    		</el-tree>
    	</el-scrollbar >
    </div>

    Vue页面<style lang="scss"></style>里部分相关代码。

    示例代码:

        .list-tree-div {
    		width: 232px;
    		overflow: auto;
    		background: none;
    		flex-grow: 1;
    		display: flex;
    		.el-scrollbar {
    			display: flex;
    			padding: 2.6px 16px 16px 0;
    			width: 232px;
    			.el-scrollbar__wrap {
    				overflow-x: hidden;
    				overflow-y: auto;
    				min-width: 250px;
    				.el-tree.filter-tree {
    					.el-tree-node{
    						> .el-tree-node__content{
    							/* 让纵向滚动条与内容最右边界限之间留有8px的宽度,使效果更好看。 */
    							padding: 0 8px 0 0;
    							.el-tree-node__expand-icon{
    								margin:-2 0 0 3px;
    								padding: 0;
    							}
    							> label.el-checkbox{
    								margin-right: 4px;
    								margin-bottom: 0px;
    								font-size: 12px;
    							}
    							.el-tree-node__label {
    								font-size: 12px;
    								line-height: 12px;
    							}
    						}
    						
    						.el-tree-node__children{
    							/* 出现横轴滚动条 */
    							display: inline-block;
    							min-width: 100%;
    						}
    						
    					}
    				}
     
    			}
    			.el-scrollbar__bar {
    				&.is-horizontal{
    					bottom:0;
    				}
    				&.is-vertical{
    					right:0;
    				}
    			}
    		}
    	}

    展开全文
  • el-scrollbar> <div v-for="item in 100">{{item}}</div> </el-scrollbar> </div> // css .box{ height: 200px; // 最外层要设置盖度,才能限制它出滚动条呀 } .el-scrollbar{ h

    1.普通添加滚动条

    <!-- html -->
    <div class="box">
      <el-scrollbar>
        <div v-for="item in 100">{{item}}</div>
      </el-scrollbar>
    </div>
    
    // css
    .box{
      height: 200px;             // 最外层要设置盖度,才能限制它出滚动条呀
    }
    .el-scrollbar{
      height: 100%;              // el-scrollbar要有高度哦
    }
    .el-scrollbar__wrap{         // 用于隐藏横向滚动条
      overflow-x: hidden;
    }
    

    2.element-ui表格中使用滚动条,但是要固定表头,如果直接加入会发现样式上的问题,如下:
    在这里插入图片描述

    <div class="box">
     <el-scrollbar style="height:100%">
       <el-table height="200px">       // 大家都知道,如果想要表头固定高度,需要给他高度
         .....
       </el-table>
     </el-scrollbar>
    </div>
    

    样式上的解决

    // 滚动条的宽度
    .el-table__body-wrapper::-webkit-scrollbar {
      width: 6px; // 横向滚动条
      height: 6px; // 纵向滚动条 必写
    }
      // 滚动条的滑块
    .el-table__body-wrapper::-webkit-scrollbar-thumb {
      background-color: #ddd;
      border-radius: 3px;
    }
    .gutter{
      background-color: rgb(232, 232, 232);   // 这里是填充上未被填充的右侧表头空白
    }
    .el-table__body{
      width: 100% !important;        // 这里一定要!important哦,来覆盖掉之前的宽度
    }
    
    展开全文
  • el-scrollbar></el-scrollbar> 这个组件在ElementUI 的官方组件文档里面是没有提到的(百度发现的),也可以直接使用的,解决了困扰我很多天的问题,简单写了个例子,留着以后可能还用得着: html代码:...
  • 当使用el-scrollbar的时候,比如你的数据列表是后端获取的,这时候,初始化的时候,因为数据还没有获取 到,导致里面的内容没有撑开,所以滚动条是不显示的,但是可以正常滚动,所以解决办法是在获取到列表的时候,...
  • Element组件el-scrollbar滚动条包裹el-tbale表格不显示横线滚动条以及滚动条重叠问题
  • this.$refs.elScrollBar.wrap.scrollTop = 0 // 想滚到哪个高度,就写多少 // 每次加载数据后将x轴滚动条归零 this.$refs.elTable....父组件class{ /deep/ .el-scrollbar__bar.is-horizontal>div{ display: none; } }
  • el-scrollbar显示横向滚动条

    千次阅读 2021-03-16 17:13:33
    让横向滚动条出现,同时不显示默认的滚动条, 需要在 el-scrollbar__wrap 添加 .el-scrollbar__wrap{ ... el-scrollbar__view必须是浮动或 display: inline-block 才能出现滚动条 .el-scrollbar .
  • el-scrollbar使用

    2022-01-20 15:36:51
    elementUI隐藏组件el-scrollbar
  • el-scrollbar:Element UI隐藏组件。 注意事项: 1.el-scrollbar的父层要有固定高度 2.el-scrollbar的高度要设成100% 3.如果出现横滚动条,添加overflow-x:hidden; 源代码 // reference ...
  • el-scrollbar 组件 当组件中内容过多时,展开后会产生滚动条影响外部整体样式,这个时候需要将滚动条放在组件内部,不让其变化影响其他组件。el-scrollbar可以实现这个功能 el-scrollbar实现菜单内部滚动条 <el-...
  • 使用el-scrollbar进行滚动条样式统一。 问题描述: 部分源代码如下图所示:(注:el-table中,height属性放到style里,height没有生效,目前没有找到原因,所以放在外边) <el-table :data="pojoList" v-if=...
  • 一、问题如下图,原始表格滚动条很丑 二、想要的效果如下 三、操作步骤 1、template部分代码 <template> <...-- 使用el-scrollbar标签的效果 --> <div class="box"> <!...
  • el-scrollbar 使用以及滚动到指定位置

    万次阅读 多人点赞 2020-06-07 18:56:32
    其实,在 element-UI 中有一个隐藏组件 el-scrollbar ;这个组件的滚动条还是很不错的,比原生的滚动条好看,而且还有一些效果(鼠标移入时显示,移出时隐藏)。 使用 el-scrollbar;以及滚动到指定位置。
  • el-scrollbar ref="refScrollbar" @wheel.prevent="handleScroll"> <div class="ct-scrollbar"> </div> </el-scrollbar> </template> <script> export default { setup() {...
  • 每次使用el-scrollbar组件显示滚动条,都需要设置wrap-class样式的具体高度,如果有细微变化调整不灵活 解决办法:使用一个div 控件将 el-scrollbar 组件包裹起来,并设置为 position: relative;相对定位,wrap-...
  • el-scrollbar滚动条组件

    2021-10-09 11:34:24
    本篇主要是整理一下element ui找不到的el-scrollbar组件的api,做一个简单的带滚动条的查询工具栏(查询栏表单可自定义插入)。 // 导入组件 import Scrollbar from 'element-ui' const element = { install: ...
  • /deep/ .el-scrollbar__view{display:inline-block !important;} /deep/ .el-scrollbar__wrap{overflow-x: hidden !important;} //html el-scrollbar.left el-tree( :data="treeData" node-key="id" ref=...
  • element-ui中隐藏组件el-scrollbar的使用element-ui中隐藏组件el-scrollbar的使用一、使用虽然官网没有介绍该组件,但是网上有许多小伙伴扒了源码并提供了使用方法view-class=""wrap-class=""tag="">属性props: {...
  • elementUI 滚动条样式问题 原生滚动条溢出
  • el-scrollbar 滚动滑轮

    2022-01-04 14:26:43
    element-ui有一个隐藏的滚动滑轮,只是没写在文档里面,直接用就行 <el-scrollbar style="height: 100%"> </el-scrollbar>
  • el-scrollbar 使用说明

    千次阅读 2019-12-13 09:57:29
    el-scrollbar element-ui 的滚动条组件 ,官方文档上面是没有介绍这个组件的。 效果图: 简单使用: <template> <div style="height:768px;"> <el-scrollbar style="height:100%"> ...
  • el-scrollbar隐藏横向滚动条一、 在使用el-scrollbar时,即使横向没有超出宽度,下方依然会出现2个三角形的滚动区域箭头,解决办法; 一、 在使用el-scrollbar时,即使横向没有超出宽度,下方依然会出现2个三角形的滚动...
  • element之el-scrollbar

    2021-04-03 15:21:46
    el-scrollbar,在element-ui官方文档中没有给出的一个组件,观其名,知其意(是一个滚动条组件),用法如下: <template> <div class="index"> <el-scrollbar class="myScrollbar" style="height:...
  • element的el-scrollbar用法

    2021-04-19 10:40:04
    <...el-dialog class="add-comparison" title="添加" :visible="visible" @update:visible="updateVisible" width="540px" > <div class="content"> <div class="default-scro

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 4,767
精华内容 1,906
关键字:

el-scrollbar出现的问题