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>
複製代碼

---

上面代碼只是一種思路

更多的解決方案

仍是得從業務出發進行封裝