请选择 进入手机版 | 继续访问电脑版

vue-element-admin 列表页面超出滚动改为满屏显示

[复制链接]
阿峻 发表于 2021-1-1 18:29:31 | 显示全部楼层 |阅读模式 打印 上一主题 下一主题
vue-element-admin 列表页面超出滚动改为满屏显示。
 
效果如下:

列表页面,屏幕自适应始终一屏显示,外层无滚动条,设置表格超出滚动。

 
核心 css

父级元素设置

display: flex;
flex-direction: column;
 
子级元素设置

flex: 1;
 
特别注意 

display: flex; 没有继承性,从最外层的父级元素,一级级的设置到表格的父级元素。

 
表格父级元素 
.screen-card-result {
    display: flex;
    flex-direction: column;
    flex:1 1 auto;
    overflow: hidden;
    margin-bottom: 0;
}
 
表格

 
知识点总结:

flex:1; 自动撑满父级元素剩余的空间。
flex属性是flex-grow, flex-shrink 和 flex-basis的简写,默认值为0 1 auto。后两个属性可选。
该属性有两个快捷值:auto (1 1 auto) 和 none (0 0 auto)。
flex-shrink属性界说了项目标缩小比例,默认为1,即如果空间不足,该项目将缩小。
flex-grow属性界说项目标放大比例,默认为0,即如果存在剩余空间,也不放大。

框架样式修改


\src\layout\components\AppMain.vue


.app-main {
  /* navbar  50  */
  /* 分页高度  72  */
  min-height: calc(100vh - 122px);
  width: 100%;
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
}
 
.fixed-header+.app-main {
  padding-top: 50px;
}
 
.hasTagsView {
  .app-main {
    /* 84 = navbar + tags-view = 50 + 34 */
    /* 84 = navbar + tags-view +分页 = 50 + 34 +72 */
    min-height: calc(100vh - 156px);
  }
 
  .fixed-header+.app-main {
    padding-top: 84px;
  }
}

 
\src\styles\index.scss

.app-container {
  width:100%;
  box-sizing: border-box;
  padding: 10px 10px 0 10px;
  background: #f5f5f5;
  display: flex;
  flex-direction: column;
  flex:1 1 auto;
  overflow: hidden;
  .el-table .cell{
    padding:0;
  }
}

来源:https://blog.csdn.net/Irene1991/article/details/111950733
免责声明:如果侵犯了您的权益,请联系站长,我们会及时删除侵权内容,谢谢合作!
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则


专注素材教程免费分享
全国免费热线电话

18768367769

周一至周日9:00-23:00

反馈建议

27428564@qq.com 在线QQ咨询

扫描二维码关注我们

Powered by Discuz! X3.4© 2001-2013 Comsenz Inc.( 蜀ICP备2021001884号-1 )