Vue 自适应高度表格的实现方法

前言 示例版本为 Element-ui 2.13.1 + Vue 2.6.11 本人是做后台开发的，由于公司业务要求需要将前后台模块进行分离，两年前选择使用vue-element-admin 项目进行前台的开发，该框架集成了很多功能，特别适合对 Vue 很陌生的新手，公司项目组成员接受程度普遍较高。 在使用过程中 表格 是必不可少的一个控件，用于展示数据，单页数据量过多就会导致浏览器自动生成右侧滚动条。 如果页面有头部信息或查询按钮，移动滚动条后会遮挡住这些操作和信息内容。 Element-UI 中的 el-table 提供了设置高度的选项，在代码中设置 height 属性就可以现在表格 Vue.js 是一个流行的前端JavaScript框架，它提供了丰富的组件和便捷的生命周期管理，使得开发者能够构建高效、可维护的用户界面。在本篇文章中，我们将探讨如何在Vue中实现自适应高度的表格，尤其是在使用Element UI库的情况下。Element UI 是一个基于 Vue 的组件库，它包含了许多实用的UI组件，如表格（el-table），方便开发者快速构建企业级后台界面。 当表格数据量较大时，浏览器通常会显示右侧滚动条，这可能导致页面上的头部信息或查询按钮被遮挡。Element UI 的 el-table 组件允许通过设置 `height` 属性来指定表格的高度，从而在表格内部生成滚动条，避免影响整个页面的布局。然而，固定的高度在不同分辨率或浏览器缩放比例下可能无法适应，导致外部滚动条依然出现。 为了解决这个问题，我们可以利用Vue的自定义指令（custom directive）功能。自定义指令让我们可以扩展Vue的核心能力，对DOM元素进行更底层的操作。在这个场景下，我们需要创建一个名为 `v-adaptive` 的指令，以实现表格高度根据窗口大小动态调整。 我们创建一个名为 `src/directive/el-table/adaptive.js` 的文件，导入 `addResizeListener` 和 `removeResizeListener` 方法，这两个方法来自Element UI的 `resize-event` 工具，用于监听窗口尺寸的变化。然后定义以下自定义指令的钩子函数： 1. `bind`: 在指令首次绑定到元素时调用，可以进行一次性初始化设置。 2. `inserted`: 当被绑定的元素插入到其父节点时调用，确保父节点存在，但不保证已在文档中。 3. `unbind`: 在指令与元素解绑时调用，用于清理资源。 在 `doResize` 函数中，我们计算表格的高度，包括距窗口底部的距离，然后调用 `setHeight` 和 `doLayout` 方法来更新表格的高度。这个函数需要在窗口尺寸改变时实时执行，因此我们在 `bind` 钩子中添加了窗口尺寸的监听器，并在 `unbind` 钩子中移除监听器。 接下来，为了在整个Vue应用中使用这个自定义指令，我们需要在 `src/directive/el-table/index.js` 文件中导出并安装 `adaptive` 指令，使其可以在Vue实例上全局注册。 在Vue组件中，我们可以通过在表格元素上添加 `v-adaptive` 指令来使用这个功能，例如： ```html <el-table v-adaptive="{ value: '500px', bottomOffset: 30 }"> <!-- 表格内容 --> </el-table> ``` 这里，`value` 参数用于设定表格的基础高度，`bottomOffset` 参数则是设置距窗口底部的距离，用于确保页码等信息始终可见。 总结来说，通过Vue的自定义指令功能，我们可以创建 `v-adaptive` 指令来动态地调整Element UI表格的高度，使其在不同分辨率和浏览器缩放比例下都能保持内部滚动条，从而提供更好的用户体验。这种实现方法不仅解决了固定高度的问题，还保持了界面的整洁和易用性，尤其适用于后台管理系统中数据展示的需求。