表格存在的bug

当屏幕的分辨率变化，那么页面布局就不对了，表格和分页都移位了，而且分页不在最底部。如下图所示，怎么解决这个问题？

Q：当选中页面展示多少条数据时，希望分页不要随着数据的数量移动位置，如何实现？

A：为了表格页面统一，让页码组件停留在页面底部，应该设置el-table组件的 height，而不是max-height。

分页固定在底部，表格占据剩余空间

在 el-table 元素中定义了 height 属性，即可实现固定表头的表格，实现滚动条效果。把分页固定在页面底部。

不管是多少条表格数据，分页一直是在底部的，效果如下：

存在的问题：

当切换屏幕的分辨率时，表格由于设置了固定的el-table的height，表格始终都是这个高度，固定不变了。希望能够根据分辨率的变化，自动调整表格的高度。接下来，解决这个问题，列出了两个方法，推荐方法2。

不同分辨率下的表格自适应

方案1：直接在表格所属页面计算

计算出除了表格之外的剩下的高度。用浏览器窗口内部高度 – 剩下的高度 = 表格的高度。

方案2：使用vue的自定义指令方式（推荐）

自定义指令，以  v-  开头

在src下新建directive文件夹，在里面新建index.ts文件，table文件夹。在table文件夹下新建了表格的高度自适应文件tableAutoHeight.ts。

src/directive/table/tableAutoHeight.ts文件如下：

全局注册自定义指令

src/directive/index.ts文件如下：

1.     导入 tableAutoHeight.ts 文件中定义的指令。

2.     利用 Vue 的 directive 方法全局注册这个自定义指令。全局指令即可通过 app.directive('xxx', { }) 来定义, 使用时直接在 dom 中写 v-xxx 就行。

在main.ts中引入、使用src/directive

这样一来，我们定义的 v-tableAutoHeight 指令就会被注册到整个 Vue 应用中，就可以在任何需要的地方使用它了。

在页面的el-table中使用自定义指令：

现在，就实现了表格在不同分辨率下的自适应高度效果了。