vue vue的table表格自适应_Vue 自适应高度表格

前言

示例版本为 Element-ui 2.13.1 + Vue 2.6.11

本人是做后台开发的，由于公司业务要求需要将前后台模块进行分离，两年前选择使用 vue-element-admin 项目进行前台的开发，该框架集成了很多功能，特别适合对 Vue 很陌生的新手，公司项目组成员接受程度普遍较高。

在使用过程中 表格 是必不可少的一个控件，用于展示数据，单页数据量过多就会导致浏览器自动生成右侧滚动条。

如果页面有头部信息或查询按钮，移动滚动条后会遮挡住这些操作和信息内容。

Element-UI 中的 el-table 提供了设置高度的选项，在代码中设置 height 属性就可以现在表格的高度，数据量过多也只会在表格内部生成滚动条，而不是整个页面生成滚动条。

但是这个高度需要固定的数值，不同的分辨率或者缩放后的浏览器使用固定高度后，不能满足只在 el-table 内部生成滚动条的条件。

想要满足上述条件就需要使用 v-adaptive 指令了。

Vue 自定义指令

你可能会好奇 v-adaptive 是在哪里来的？它是自定义的指令，设置表格高度需要对普通 DOM 元素进行底层操作。Vue 除了核心功能默认内置的指令 (v-model 和 v-show)，也允