element-ui表格高度自适应（el-table 自适应高度）-Toy模板网

这篇具有很好参考价值的文章主要介绍了element-ui表格高度自适应（el-table 自适应高度）。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

想让element-ui的表格 el-table 出现滚动条的时候，如果不做处理就只能是 height=“XXXpx”，给它一个固定的高度，我们的页面正常情况下，是不允许出现页面级滚动条的，也是不美观的，想让table自适应高度并且有滚动条，而且不会出现页面级滚动条，可以这么实现，下面是我写的一个小组件，如果你明白了他的原理，就可以灵活运用在你自己的项目中了。

1、组件代码（理解使用）

主要使用了flex让table-container占满剩余部分，使用绝对定位让table-container定在page-body-table 上面，加了几个插槽方便复用

<template>
  <div class="table-page-container">
    <div class="page-header">
      <slot name="header"></slot>
    </div>
    <div class="page-body-table">
      <div class="table-container">
        <slot name="table"></slot>
      </div>
    </div>
    <div class="page-footer">
      <slot name="footer"></slot>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {}
  },
}
</script>
<style lang="scss" scoped>
.table-page-container {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  .page-body-table {
    flex: 1;
    position: relative;
    .table-container {
      position: absolute;
      width: 100%;
      height: 100%;
    }
  }
}
</style>

2、如何使用该组件

引入和注册组件就不写了，如果你的页面大部分都是这种结构，或者较多都是这种页面结构，可以全局注册，注意el-table的height属性的值必须是100%文章来源地址https://www.toymoban.com/news/detail-798183.html

<template>
  <div class="page-container">
    <TablePageContainer>
      <template #header>
        <div>头部</div>
      </template>
      <template #table>
        <!-- table 部分 -->
        <el-table :data="tableData" height="100%" style="width: 100%">
          <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>
      </template>
      <template #footer>一边表格都会有分页分页放在这里挺好的</template>
    </TablePageContainer>
  </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 弄',
        },
        {
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1516 弄',
        },
      ],
    }
  },
}
</script>