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

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;

}

 

表格

<el-table :data="tableData" :fit=true :show-header=true height="100%">

 

知识点总结：

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

<style lang="scss" scoped>

.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;

  }

}

</style>

 

\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;

  }

}