element-ui 隐藏组件之滚动条

深碍√TFBOYSˉ_ 2021-09-07 16:56 671阅读 0赞

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

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

情况二：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3doMjAxNDEyMTI_size_16_color_FFFFFF_t_70 1]  
这种情况需要给最外层盒子设置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>

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3doMjAxNDEyMTI_size_16_color_FFFFFF_t_70]: /images/20210813/be278d9e40d64b838ca3f0d90175b639.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3doMjAxNDEyMTI_size_16_color_FFFFFF_t_70 1]: /images/20210813/e354c31fb2c24028914d004ae08d9b54.png