element-ui 隐藏组件之滚动条

最新推荐文章于 2023-10-25 16:39:38 发布

wh20141212

最新推荐文章于 2023-10-25 16:39:38 发布

阅读量197

点赞数

分类专栏： element-ui 文章标签： css

本文链接：https://blog.csdn.net/wh20141212/article/details/116607080

版权

element-ui 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

新项目使用到页面滚动，同事引入了element-ui中的滚动条，特此记录下
情况一：
在这里插入图片描述

则直接在c页面最外层添加代码：

<template>
	<el-scrollbar ref="scrollCon" class="no-scroll-x flex-full overflow-hidden">
		......
	</el-scrollbar>
</template>

情况二：
在这里插入图片描述
这种情况需要给最外层盒子设置display:flex;flex-direction: column;则滚动页面才能自适应

<template>
    <div class="BillBrowsPage He-scrollcss">
        <div class="title_temp">
            <h2>
                话单统计
            </h2>
        </div>

        <el-scrollbar ref="scrollCon" class="no-scroll-x flex-full overflow-hidden">
            <div class="search_condition">
            	.....
			</div>

            <!-- 表格内容 -->
            <div class="table_box">
            		......
            </div>
        </el-scrollbar>

    </div>
</template>
<style scoped >
.He-scrollcss{
	width: 100%;
    padding: 15px;
    height: 100%;
    display: flex;
    flex-direction: column;
}
.overflow-hidden {
    overflow: hidden;
}
.flex-full{
   flex:1;
}
</style>