实现el-table高度自适应,让滚动条只能出现在表格内部

3,025 阅读2分钟

已知需要自适应的页面结构

image.png

  • 绿色固定高度区域: 可以想象为页面顶部的统计卡片
  • 白色自适应高度区域: 可以想象为el-table所在区域
  • 蓝色定高区域: 可以想象为分页组件区域
  • 黄色动态高度区域: 可以想象为搜索条件面板(你可以认为是定高的也可以认为是不定高的【比如:支持展开/收缩的高级搜索,搜索条件占用的高度可能会从1行变为多行】)

分析

首先要实现对应的页面结构,让白色区域能够自适应高度,采用flex布局,是相对容易的解决方案

  • 整体flex布局,高度设置100%,flex-direction: column;
  • 白色部分就设置为flex:1
  • 绿色和蓝色部分就设置为固定高度+flex-shrink: 0
  • 黄色部分不设置高度,但设置:flex-shrink: 0,让内容决定容器高度

页面结构搞定了,白色的el-table自适应怎么处理呢? 可能会导致白色部分高度发生变化的情况:

  1. 浏览器大小改变
  2. 黄色区域的内容从1行变成了N行或者从N行变成了1行

根据不同的情况最容易想到的解决方式为:实时监听白色区域大小的改变,并获取这个高度,再将这个高度设置给el-table

如果不考虑3,6这两个图的情况,刚刚想到的方案确实可以,只要监听resize事件,再想办法计算出白色区域高度就好了,可3,6这两个图,光监听窗口的大小改变还不行,还必须再黄色区域大小改变时,重新计算el-table的高度。有没有更简单的办法?

皇天不负有心人,终于让我找了一个通过css设置就能解决的方案:解决element table 宽高自适应 - 掘金 (juejin.cn)

最终示例代码

分页表格组件

<template>
  <div class="c-pageTableContainer">
    <div class="c-pageTableContainer-table">
      <el-table :data="tableData" style="width: 100%" height="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>
    </div>
    <div class="c-pageTableContainer-page"></div>
  </div>
</template>

<script>
export default {
  name: "PageTable",
  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 弄",
        },
        {
          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 弄",
        },
        {
          date: "2016-05-04",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1517 弄",
        },
      ],
    };
  },
};
</script>

<style scoped lang="scss">
.c-pageTableContainer {
  height: 100%;
  display: flex;
  flex-direction: column;
  &-table {
    flex: 1;
    background-color: lightseagreen;
    // 重点是这里:开始
    position: relative;
    ::v-deep(.el-table) {
      position: absolute;
    }
    // 重点是这里:结束
  }
  &-page {
    height: 60px;
    background-color: lightgray;
    flex-shrink: 0;
  }
}
</style>

调用分页表格

<template>
  <div class="c-container">
    <div class="c-container-top"></div>
    <div class="c-container-center">
      <div @click="onToggle"><el-button>toggle按钮</el-button></div>
      <div v-if="show"><el-button>按钮</el-button></div>
    </div>
    <div class="c-container-bottom">
      <PageTable></PageTable>
    </div>
  </div>
</template>

<script>
import PageTable from "@/components/table/PageTable";
export default {
  name: "AutoHeightElTable",
  components: {
    PageTable,
  },
  data() {
    return {
      show: false,
    };
  },
  methods: {
    onToggle() {
      this.show = !this.show;
    },
  },
};
</script>

<style scoped lang="scss">
.c-container {
  height: 100%;
  display: flex;
  flex-direction: column;
  &-top {
    height: 100px;
    background-color: lightblue;
  }
  &-center {
    background-color: lightcoral;
    flex-shrink: 0;
  }
  &-bottom {
    flex: 1;
    background-color: lightgray;
  }
}
</style>

效果

image.png

image.png

image.png

image.png

参考文章

解决element table 宽高自适应 - 掘金 (juejin.cn)

elementUi表格高度问题 - 掘金 (juejin.cn)