elementUi表格高度问题

Dignity_呱
2,237 阅读9分钟

前言

  • 过年啦，集五福啦!
  • 在线音乐戳我呀！
  • 音乐博客源码上线啦！
  • 相信在开发中大部分同学都使用 「elementtUi」 作为搭建项目的首选，但只要使用到表格时，一不注意便会出现表格高度只显示一半或者无法自适应。
  • 下面介绍下我在项目中是如何解决表格高度问题

❝

请耐心看完，对布局方面或许别有一番收获哦~

❞

页面结构

  • APP.vue
    • Main.vue
      • Hello.vue

先简单使用「el-table」制作表格

在 「App.vue」 文件中，设置死高度1200px

<template>
  <div id="app"></div>
</template>

<style lang="less">
#app {
  height: 1200px;
  overflow: hidden;
}
</style>

在我们的主页面 「Main.vue」 文件中开发，因项目需要，所以这里级别故意写多

<template>
  <div class="main">
    <div class="main-body">
      <div>
      <h1>各位大佬你们好呀</h1>
      <div>各位大佬你们好呀各位大佬你们好呀各位大佬你们好呀各位大佬你们好呀各位大佬你们好呀各位大佬你们好呀各位大佬你们好呀各位大佬你们好呀各位大佬你们好呀各位大佬你们好呀各位大佬你们好呀各位大佬你们好呀各位大佬你们好呀各位大佬你们好呀各位大佬你们好呀各位大佬你们好呀各位大佬你们好呀各位大佬你们好呀各位大佬你们好呀各位大佬你们好呀各位大佬你们好呀各位大佬你们好呀各位大佬你们好呀</div>
      <hr />
    </div>
    <div class="content">
      <el-button >还有一天就可以回家了</el-button>
      <Hlloe  />
    </div>
    </div>
  </div>
</template>

<style lang="less" scoped>
.main{
  height: 50%;
}
</style>

子组件「Hello.vue」文件

<template>
<div class="hello">
  <div class="table-content">
  <el-table
    :data="tableData"
    border
    hight="265"
    class="table-f-f"
    >
    <el-table-column
      prop="date"
      label="日期"
      width="180">
    </el-table-column>
    <el-table-column
      prop="name"
      label="姓名"
      width="180">
    </el-table-column>
    <el-table-column
      prop="address"
      label="地址">
    </el-table-column>
  </el-table>

  <el-pagination
  :page-size="20"
  :pager-count="11"
  layout="prev, pager, next"
  :total="1000">
</el-pagination>
  </div>
</div>
</template>

<script>
  export default {
    data() {
      return {
        tableData: [
          {
          date: '2016-05-02',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-04',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1517 弄'
        }, {
          date: '2016-05-01',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1519 弄'
        },
        此处省略500条...
        ]
      }
    }
  }

目前出现的效果如下：

问题有两项：

  • 表格显示不全
  • 表格无法滚动

使用弹性布局Flex + 父相子绝定位来解决表格问题

「Main.vue」 文件修改

对于class为「content」的父级元素都要添加display: flex; flex-direction: column; height: 100%;，因为 「flex」 布局的父元素都需要设置高度100%

而「content」容器不需要设置高度，所以将其设为unset，并使用相对定位，作为父元素

<template>
  <div class="main">
    <div class="main-body">
      <div>
        <h1>各位大佬你们好呀</h1>
        <div>各位大佬你们好呀各位大佬你们好呀各位大佬你们好呀各位大佬你们好呀各位大佬你们好呀各位大佬你们好呀各位大佬你们好呀各位大佬你们好呀各位大佬你们好呀各位大佬你们好呀各位大佬你们好呀各位大佬你们好呀各位大佬你们好呀各位大佬你们好呀各位大佬你们好呀各位大佬你们好呀各位大佬你们好呀各位大佬你们好呀各位大佬你们好呀各位大佬你们好呀各位大佬你们好呀各位大佬你们好呀各位大佬你们好呀</div>
        <hr />
      </div>
      <div class="content">
        <el-button >还有一天就可以回家了</el-button>
        <Hlloe  />
      </div>
    </div>
  </div>
</template>

<style lang="less" scoped>
.main{
  display: flex;
  flex-direction: column;
  height: 100%;
  /* 每一级都要 */
  .main-body{
    display: flex;
    flex-direction: column;
    height: 100%;
    .content{
      position: relative;
      flex-grow: 2;
      height: unset!important;
    }
  }
}
</style>

子组件 「Hello.vue」 文件是嵌套在「Main.vue」中

该class为「hello」的类名作为该文件的父级元素，其定位是绝对定位，除了上需要设置50px（因为上面有个按钮，需要减去按钮的高度），其余下、左、右都设为0px，同理不需要设置高度unset

class为「table-content」则是包住了表格和分页，定位为绝对，高度calc(100% - 30px);，要进行动态计算，这里的减去30是分页的高度

下面可以看到我们深层给el-table高度100%

class为「table-f-f」写在「el-table」组件上，是想把他布局写为「flex」，好让表格下的「body」el-table__body-wrapper类名设为flex:1

<template>
<div class="hello">
  <div class="table-content">
    <el-table
      :data="tableData"
      border
      hight="265"
      class="table-f-f"
      >
      <el-table-column
        prop="date"
        label="日期"
        width="180">
      </el-table-column>
    </el-table>

    <el-pagination
    :page-size="20"
    :pager-count="11"
    layout="prev, pager, next"
    :total="1000">
    </el-pagination>
  </div>
</div>
</template>

<script>
  export default {
    data() {
      return {
        tableData: [
          {date: '2016-05-02',name: '王小虎',address: '上海'}, 
          {date: '2016-05-02',name: '王小虎',address: '上海'}, 
          此处省略500条...
        ]
      }
    }
  }
</script>


<style lang="less" scoped>
.hello{
  // 包括表格、分页
  position: absolute;
  top: 50px;
  left: 0;
  bottom: 0;
  right: 0;
  height: unset!important;
  .table-content{
    position: relative;
    height: calc(100% - 30px);
    .table-f-f{
      display: flex;
      flex-direction: column;
    }
  }
}
/deep/ .el-table{
  height: 100%!important;
}
/deep/ .el-table__body-wrapper{
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
}
</style>

「最终效果如下：」

表格显示正常了，可以看到我们的样式全程没有设置高度为固定值，很多人喜欢设置.el-table:80% !important,这样有时候确实是可以解决表格高度问题，但只要是浏览器的宽度发生变化，就很有可能会出现表格显示不全的问题。

因为我们系统是需要自适应的，用的是rem作为单位，在加上上述布局使用flex + 父相子绝定位，就很完美的解决表格高度问题。

最后的最后

❝

使用flex布局时，需注意：只要有一层div元素没有设置他高度100%，下面的元素高度就不能填满空间

❞

以往推荐

Vue-Cli3搭建组件库

Vue实现动态路由（和面试官吹项目亮点）

项目中你不知道的Axios骚操作（手写核心原理、兼容性）

VuePress搭建项目组件文档

koa2+vue+nginx部署

vue-typescript-admin-template后台管理系统

原文链接

juejin.cn/post/692655…

avatar
文章
阅读
粉丝