Element Table 自适应高度解决方案

分析

以下图(此方案中使用的是Element Table官网copy的代码(多用于OA, CMS, ERP这类系统中)

如上图大致目前没有问题，可是存在细节问题那就是在table在滚动的过程当中表头没有了

若是说这里的列比较多，用户须要查看的数据在最后面，每次某个列的数据对应的是什么意思(尤为是表格数字比较多的话,很是恼火)，须要上下来回滚动table 内容才能解决

因此说咱们要解决的就是表头固定 ①(标记问题)

表头固定简单 官方提供prop => height，那继续看下图

咱们的用户群在使用产品的过程当中, 不可能说是固定用一样大小屏幕

假设咱们这里设置了固定高度600px

那有些用户使用过程当中 将窗口缩小了 不够600px

就会出现 table的body中一个滚动条 table外面的容器出现一个滚动条

还有就是有些用户使用的是大屏幕,很显然600px可能只占了他屏幕的一半，这里数据又多

就又出现新的问题，明明我屏幕能够显示完，产品这里只占了一半 而后开始滚动

---

因此新的问题高度如何设置，才能使咱们适应各类用户②

---

咱们这里想到一个办法，动态计算而且将table的height设置为父节点的height

那父节点无论是flex: 1,仍是height：100%,都可以适应

问题

咱们须要解决上面两个问题

• 要解决的就是表头固定
• 高度如何设置，才能使咱们适应各类用户

表头固定

这里表头固定仍是使用Element UI官方提供的方案——设置height

<!-- table 部分代码 -->
<el-table id="tableData" :data="tableData" :height="height">
  <el-table-column prop="date" label="日期" width="140"></el-table-column>
  <el-table-column prop="name" label="姓名" width="120"></el-table-column>
  <el-table-column prop="address" label="地址"></el-table-column>
</el-table>
复制代码

export default {
  data() {
    const item = {
      date: "2016-05-02",
      name: "王小虎",
      address: "上海市普陀区金沙江路 1518 弄"
    };
    return {
      // 模拟数据
      tableData: Array(100).fill(item),
      // 随便定义一个初始高度防止报错
      height: "200px"
    };
  }
}
复制代码

如上设置height设置好了table表头固定

高度如何设置

上面设置好了表头固定, 继续咱们要动态设置height为父节点的height

而且给el-table设置 id <el-table id="tableData" :data="tableData" :height="height">

这里须要注意的是 咱们在设置为父节点的height的过程当中假设父节点有padding值咱们须要减掉

export default {
	methods: {
    // 这个方法用来动态设置 height
    getAutoHeight() {
      let el = document.querySelector("#tableData"),
        elParent = el.parentNode,
        pt = this.getStyle(elParent, "paddingTop"),
        pb = this.getStyle(elParent, "paddingBottom");
      // 必定要使用 nextTick 来改变height 否则不会起做用
      this.$nextTick(() => {
        this.height = elParent.clientHeight - (pt + pb) + "px";
      });
    },
    // 获取样式 咱们须要减掉 padding-top， padding-bottom的值
    getStyle(obj, attr) {
      // 兼容IE浏览器
      let result = obj.currentStyle
        ? obj.currentStyle[attr].replace("px", "")
        : document.defaultView
            .getComputedStyle(obj, null)[attr].replace("px", "");
      return Number(result);
    }
  }
}
复制代码

高度设置好了,咱们须要在挂载结束后的钩子函数中调用 此方法

export default {
  mounted() {
    this.getAutoHeight();
  }
}
复制代码

那基本已经离结束不远了 ， 继续看图

可是这里又产生了新的问题，那就是 若是窗口大小改变, 那原来的height就不适用于如今的height

来来来 继续看图 就会出现两个滚动条

解决这个问题的办法 须要作两个操做

在window.onresize中调用咱们设置的 获取高度的方法

export default {
  mounted() {
    this.getAutoHeight();
    const self = this;
    window.onresize = function() {
      self.getAutoHeight();
    };
  }
}
复制代码

而且将父级节点CSS设置为overflow: hidden 我这里使用的官网示例代码 个人以下

.el-main {
  overflow: hidden !important;
}
复制代码

---

最终成果

我这里用控制台的高度 模拟窗口高度变化

完整代码以下

<template>
  <el-container class="layout" style="border: 1px solid #eee">
    <el-aside width="200px" style="background-color: rgb(238, 241, 246)">ASIDE</el-aside>
    <el-container>
      <el-header style="text-align: right; font-size: 12px">HRADER</el-header>
      <el-main>
        <el-table id="tableData" :data="tableData" :height="height">
          <el-table-column prop="date" label="日期" width="140"></el-table-column>
          <el-table-column prop="name" label="姓名" width="120"></el-table-column>
          <el-table-column prop="address" label="地址"></el-table-column>
        </el-table>
      </el-main>
    </el-container>
  </el-container>
</template>
<script> export default { name: "AutoHeightTable", data() { const item = { date: "2016-05-02", name: "王小虎", address: "上海市普陀区金沙江路 1518 弄" }; return { tableData: Array(100).fill(item), height: "200px" }; }, mounted() { this.getAutoHeight(); const self = this; window.onresize = function() { self.getAutoHeight(); }; }, methods: { getAutoHeight() { let el = document.querySelector("#tableData"), elParent = el.parentNode, pt = this.getStyle(elParent, "paddingTop"), pb = this.getStyle(elParent, "paddingBottom"); this.$nextTick(() => { this.height = elParent.clientHeight - (pt + pb) + "px"; }); }, getStyle(obj, attr) { // 兼容IE浏览器 let result = obj.currentStyle ? obj.currentStyle[attr].replace("px", "") : document.defaultView .getComputedStyle(obj, null)[attr].replace("px", ""); return Number(result); } } }; </script>
<style> .layout { height: 100%; width: 100%; overflow: hidden; } .el-header { background-color: #b3c0d1; color: #333; line-height: 60px; } .el-aside { color: #333; } .el-main { overflow: hidden !important; } </style>
复制代码

---

上面代码只是一种思路

更多的解决方案

仍是得从业务出发进行封装