想讓element-ui的表格 el-table 出現(xiàn)滾動條的時候，如果不做處理就只能是 height=“XXXpx”，給它一個固定的高度，我們的頁面正常情況下，是不允許出現(xiàn)頁面級滾動條的，也是不美觀的，想讓table自適應(yīng)高度并且有滾動條，而且不會出現(xiàn)頁面級滾動條，可以這么實現(xiàn)，下面是我寫的一個小組件，如果你明白了他的原理，就可以靈活運用在你自己的項目中了。

1、組件代碼（理解使用）

主要使用了flex讓table-container占滿剩余部分，使用絕對定位讓table-container定在page-body-table 上面，加了幾個插槽方便復(fù)用

<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、如何使用該組件

引入和注冊組件就不寫了，如果你的頁面大部分都是這種結(jié)構(gòu)，或者較多都是這種頁面結(jié)構(gòu)，可以全局注冊，注意el-table的height屬性的值必須是100%文章來源地址http://www.zghlxwxcb.cn/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: '上海市普陀區(qū)金沙江路 1518 弄',
        },
        {
          date: '2016-05-04',
          name: '王小虎',
          address: '上海市普陀區(qū)金沙江路 1517 弄',
        },
        {
          date: '2016-05-01',
          name: '王小虎',
          address: '上海市普陀區(qū)金沙江路 1519 弄',
        },
        {
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀區(qū)金沙江路 1516 弄',
        },
      ],
    }
  },
}
</script>

到了這里，關(guān)于element-ui表格高度自適應(yīng)（el-table 自適應(yīng)高度）的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！