Element Table 自适应高度的实现示例

更新时间：2024年07月24日 10:05:12 作者：ErvinHowell

el-table的高度不能适应不同电脑的分辨率,也不能跟随浏览器的高度变化而变化的问题,本文就来解决一下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>

上面代码只是一种思路
更多的解决方案
还是得从业务出发进行封装

到此这篇关于Element Table 自适应高度的实现示例的文章就介绍到这了,更多相关Element Table 自适应高度内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

elementUI给el-tabs/el-tab-pane添加图标效果实例
这篇文章主要给大家介绍了关于elementUI给el-tabs/el-tab-pane添加图标效果实例的相关资料,文中通过实例代码介绍的非常详细,对大家学习或者使用elementUI具有一定的参考学习价值,需要的朋友可以参考下
2023-07-07
基于vue3&element-plus的暗黑模式实例详解
实现暗黑主题的方式有很多种,也有很多成型的框架可以直接使用,下面这篇文章主要给大家介绍了关于基于vue3&element-plus的暗黑模式的相关资料,需要的朋友可以参考下
2022-12-12
Vue项目中loading卡死的问题及解决方案
文章剖析Vue项目中loading卡死问题,揭示其本质为异步阻塞与响应式渲染冲突,提出分五层解决方案：nextTick强制刷新、任务分片/Worker解耦、组件封装、组合式API管理状态、性能优化与架构调整,强调需从UI、异步、计算等多维度优化
2025-07-07
15个Vue技巧,你都知道吗
在使用 Vue 开发的这几年里，掌握一些有用的技巧，使用一些更高级的技术点，总会有用的，本文就介绍了15个Vue技巧，具有一定的参考价值，感兴趣的可以了解一下
2022-02-02
基于vue.js实现购物车
这篇文章主要为大家详细介绍了基于vue.js实现购物车，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2020-01-01
vue3自定义插件的作用场景及使用示例详解
这篇文章主要为大家介绍了vue3自定义插件的作用场景及使用示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2023-02-02
Proxy中代理数据拦截的方法详解
这篇文章主要为大家详细介绍了Proxy中代理数据拦截的方法，文中的示例代码讲解详细，对我们学习或工作具有一定的借鉴价值，需要的可以参考一下
2022-12-12
使用Vue3和Plotly.js绘制交互式漏斗图的示例代码
漏斗图常用于可视化业务流程中的各个阶段的转换率,例如销售漏斗或营销漏斗,它可以帮助用户识别流程中的瓶颈和改进机会,本文给大家介绍了如何使用Vue3和Plotly.js绘制交互式漏斗图,,文中有相关代码示例供大家参考,需要的朋友可以参考下
2024-07-07
Vue3项目中多页面路由配置与Pinia状态管理的完全指南
本文详细介绍了Vue3多页面应用开发中VueRouter4的配置和使用方法,包括首页、列表页、详情页的页面导航与参数传递,并展示了Pinia状态管理与用户登录状态、用户信息管理的实现方法,需要的朋友可以参考下
2026-04-04
最适应的vue.js的form提交涉及多种插件【推荐】
这篇文章主要介绍了最适应的vue.js的form提交涉及多种插件,涉及到 vue.js动态添加css样式，tab切换，touch，表单提交，验证，toast，数据双向绑定等。需要的朋友可以参考下
2018-08-08