快捷導(dǎo)航

Element Table 自適應(yīng)高度的實(shí)現(xiàn)示例

更新時(shí)間：2024年07月24日 10:05:12 作者：ErvinHowell

el-table的高度不能適應(yīng)不同電腦的分辨率,也不能跟隨瀏覽器的高度變化而變化的問(wèn)題,本文就來(lái)解決一下Element Table 自適應(yīng)高度,感興趣的可以了解一下

分析

如下圖(此方案中使用的是Element Table官網(wǎng)copy的代碼(多用于OA, CMS, ERP這類系統(tǒng)中)

如上圖大體目前沒(méi)有問(wèn)題，但是存在細(xì)節(jié)問(wèn)題那就是在table在滾動(dòng)的過(guò)程中表頭沒(méi)有了

如果說(shuō)這里的列比較多，用戶需要查看的數(shù)據(jù)在最后面，每次某個(gè)列的數(shù)據(jù)對(duì)應(yīng)的是什么意思(尤其是表格數(shù)字比較多的話,非常惱火)，需要上下來(lái)回滾動(dòng)table 內(nèi)容才能解決

所以說(shuō)我們要解決的就是表頭固定 ①(標(biāo)記問(wèn)題)

表頭固定簡(jiǎn)單官方提供prop => height，那繼續(xù)看下圖

我們的用戶群在使用產(chǎn)品的過(guò)程中, 不可能說(shuō)是固定用同樣大小屏幕

假設(shè)我們這里設(shè)置了固定高度600px

那有些用戶使用過(guò)程中將窗口縮小了不夠600px

就會(huì)出現(xiàn) table的body中一個(gè)滾動(dòng)條 table外面的容器出現(xiàn)一個(gè)滾動(dòng)條

還有就是有些用戶使用的是大屏幕,很顯然600px可能只占了他屏幕的一半，這里數(shù)據(jù)又多

就又出現(xiàn)新的問(wèn)題，明明我屏幕可以顯示完，產(chǎn)品這里只占了一半然后開(kāi)始滾動(dòng)

所以新的問(wèn)題高度如何設(shè)置，才能使我們適應(yīng)各種用戶

我們這里想到一個(gè)辦法，動(dòng)態(tài)計(jì)算并且將table的height設(shè)置為父節(jié)點(diǎn)的height
那父節(jié)點(diǎn)不管是flex: 1,還是height：100%,都能夠適應(yīng)

問(wèn)題

我們需要解決上面兩個(gè)問(wèn)題

要解決的就是表頭固定
高度如何設(shè)置，才能使我們適應(yīng)各種用戶

表頭固定

這里表頭固定還是使用Element UI官方提供的方案——設(shè)置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: "上海市普陀區(qū)金沙江路 1518 弄"
    };
    return {
      // 模擬數(shù)據(jù)
      tableData: Array(100).fill(item),
      // 隨便定義一個(gè)初始高度防止報(bào)錯(cuò)
      height: "200px"
    };
  }
}

如上設(shè)置height設(shè)置好了table表頭固定

高度如何設(shè)置

上面設(shè)置好了表頭固定, 繼續(xù)我們要?jiǎng)討B(tài)設(shè)置height為父節(jié)點(diǎn)的height
并且給el-table設(shè)置 id <el-table id="tableData" :data="tableData" :height="height">

這里需要注意的是我們?cè)谠O(shè)置為父節(jié)點(diǎn)的height的過(guò)程中假設(shè)父節(jié)點(diǎn)有padding值我們需要減掉

export default {
    methods: {
    // 這個(gè)方法用來(lái)動(dòng)態(tài)設(shè)置 height
    getAutoHeight() {
      let el = document.querySelector("#tableData"),
        elParent = el.parentNode,
        pt = this.getStyle(elParent, "paddingTop"),
        pb = this.getStyle(elParent, "paddingBottom");
      // 一定要使用 nextTick 來(lái)改變height 不然不會(huì)起作用
      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);
    }
  }
}

高度設(shè)置好了,我們需要在掛載結(jié)束后的鉤子函數(shù)中調(diào)用此方法

export default {
  mounted() {
    this.getAutoHeight();
  }
}

那基本已經(jīng)離結(jié)束不遠(yuǎn)了，繼續(xù)看圖

但是這里又產(chǎn)生了新的問(wèn)題，那就是如果窗口大小改變, 那原來(lái)的height就不適用于現(xiàn)在的height
來(lái)來(lái)來(lái) 繼續(xù)看圖就會(huì)出現(xiàn)兩個(gè)滾動(dòng)條

解決這個(gè)問(wèn)題的辦法需要做兩個(gè)操作

在window.onresize中調(diào)用我們?cè)O(shè)置的獲取高度的方法

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

并且將父級(jí)節(jié)點(diǎn)CSS設(shè)置為overflow: hidden

我這里使用的官網(wǎng)示例代碼我的如下

.el-main {
  overflow: hidden !important;
}

最終成果

我這里用控制臺(tái)的高度模擬窗口高度變化

完整代碼如下

<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: "上海市普陀區(qū)金沙江路 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>

上面代碼只是一種思路
更多的解決方案
還是得從業(yè)務(wù)出發(fā)進(jìn)行封裝

到此這篇關(guān)于Element Table 自適應(yīng)高度的實(shí)現(xiàn)示例的文章就介紹到這了,更多相關(guān)Element Table 自適應(yīng)高度內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: