CN117270855A

CN117270855A - 一种基于vue实现表格高度自适应的方法

Info

Publication number: CN117270855A
Application number: CN202311560955.8A
Authority: CN
Inventors: 田泽君; 张金银; 王乐珩
Original assignee: Hangzhou Bizhi Technology Co ltd
Current assignee: Hangzhou Bizhi Technology Co ltd
Priority date: 2023-11-22
Filing date: 2023-11-22
Publication date: 2023-12-22
Anticipated expiration: 2043-11-22
Also published as: CN117270855B

Abstract

本发明公开了一种基于vue实现表格高度自适应的方法，所述方法包括以下步骤：步骤S1，监听会触发页面组成元素的高度发生变化的事件；包括监听触发表格的高度变化的事件、页面顶部区域的高度变化的事件和页面底部区域高度变化的事件；步骤S2，执行回调函数，计算并更新表格高度；步骤S3，浏览器绘制页面。本方法能够自动计算出适合表格展示的最大高度，无需手动测量页面中除表格外的其他元素的高度，这些元素组成了页面顶部区域和底部区域，并且随着布局变化，表格的高度会动态的随之调整。

Description

一种基于vue实现表格高度自适应的方法

技术领域

本发明涉及计算机网络及数据处理技术领域，尤其是一种基于vue实现表格高度自适应的方法。

背景技术

随着互联网技术的不断发展，网页应用越来越普及，其中数据展示是一个非常重要的功能。表格作为数据展示的主要形式之一，也越来越受到重视。而vue是一种数据驱动的框架，可以通过数据变化触发视图更新，简化开发流程。

在网页开发中，表格通常会占据整个页面的一部分或者全部。表格数据量较大，显示在页面上时会占据较大的空间，不仅影响页面的布局，还可能导致表格内容超出整个页面的范围。因此，需要对表格的高度进行控制，以便在不超出整个页面范围的前提下，充分利用页面的剩余空间展示更多的数据，进而提高表格的使用效率和用户体验。

为了计算出适合表格展示的最大高度，现有的解决方法基本上都是：先获取页面可视区域的高度，以及页面中除表格外的其他元素的高度（其他元素组成页面顶部区域和页面底部区域）。两者相减，那么留下的高度就是表格最大高度。如图1所示，表格最大高度=页面可见高度-页面中除表格外的其他元素的高度。

这种方式看似简单，但存在两个问题：

缺陷1：需要手动测量，页面中除表格外的其他元素的高度。这个过程需要耗费一定的时间和精力，并且容易出现误差，进而影响表格的显示效果。

缺陷2：随着页面操作，页面中除表格外的其他元素的高度可能会发生变化，由于表格的高度不会动态的随之调整，导致页面还是会出现滚动条。

发明内容

针对现有技术存在的问题，本发明的目的在于提供一种基于vue实现表格高度自适应的方法，能够自动计算出适合表格展示的最大高度，无需手动测量页面中除表格外的其他元素的高度，并且随着布局变化，表格的高度会动态的随之调整。同时，还支持开启和关闭表格高度自适应的功能，使得表格的显示效果更加灵活。

为实现上述目的，本发明提供一种基于vue实现表格高度自适应的方法，所述方法包括以下步骤：

步骤S1，监听会触发页面组成元素的高度发生变化的事件；包括监听触发表格的高度变化的事件、页面顶部区域的高度变化的事件和页面底部区域高度变化的事件；

步骤S2，在监听到表格数据和复选框勾选状态数据变更后，执行回调函数，清除设置在表格上的高度值限制，使表格内容能够完全展开；vue更新所有DOM元素；获取最新的DOM元素的属性，计算并更新表格高度；表格可见高度=表格总高度-表格不可见高度；当页面元素完全展开，超过页面可见高度时，使得表格不可见高度=页面不可见高度；

步骤S3，浏览器根据更新后的表格高度绘制页面。

进一步，在步骤S1中，监听的事件包括：

其一：表格的多选操作，会导致表格上方出现一个元素，用于提示勾选数量，导致页面顶部区域的高度变化；其二：表格数据的变化，会引发表格高度的变化。

进一步，用监听数据的方式来触发回调函数，监听伪代码如下

watch:{

//监听表格数据变化

tableData(){

this.recalculateTableHeight();//重新计算表格高度

},

//监听表格复选框勾选状态变化

isChecked(){

this.recalculateTableHeight();//重新计算表格高度

}

}。

进一步，在步骤S2中，在监听到表格数据和复选框勾选状态数据变更后，执行回调函数。

进一步，步骤S2包括：

步骤S21，判断是否设置开启表格高度自适应，若没有开启则结束；

步骤S22，清除设置在表格上的高度值限制，使表格内容能够完全展开；

步骤S23，vue更新所有DOM元素；

步骤S24，获取最新的DOM元素的属性，计算并更新表格高度。

进一步，在步骤S23中，vue更新所有DOM元素包括：

使用vue的nextTick方法，在vue更新所有DOM元素之后再进行计算和更新表格高度的操作。

进一步，在步骤S24中，计算并更新表格高度，包括以下步骤：

步骤S241，根据class标识，查找页面；

步骤S242，计算页面不可见高度，页面不可见高度=页面总高度-页面可见高度；

步骤S243，判断页面不可见高度是否大于0，若大于0，则进入步骤S244；

步骤S244，计算表格可见高度，表格可见高度=表格总高度-表格不可见高度=表格总高度-页面不可见高度；

步骤S245，更新表格高度。

进一步，由于使用浏览器内置的方法，获取到的页面总高度（scrollHeight）和页面可见高度（clientHeight）是整数形式，存在小数位精度丢失的情况，其误差上限为1px，所以设置一个补偿值为1px，以保证计算得到的页面不可见高度值不会偏小。

进一步，更新表格高度的伪代码如下

updateTableHeight(){

//获取页面元素

const container = table.closest(this.scrollContainer);

// 获取页面元素总高度

const scrollHeight = container.scrollHeight;

// 获取页面元素可见高度

const clientHeight = container.clientHeight;

// 获取页面元素不可见高度

const diff = scrollHeight - clientHeight;

// 未出现滚动条

if (diff === 0) return;

// 设置精度补偿

const offset = 1;

// 设置表格高度

table.style.height = `${table.scrollHeight - diff - offset}px`;

}。

本发明有益效果：

根据本发明的基于vue实现表格高度自适应的方法，不仅实现了滚动条只会出现在表格内部的效果，并且随着布局变化，表格的高度会动态的随之调整。无需测量页面中除表格外的其他元素的高度，减少开发人员的工作量，还可以指定是否开启表格高度自适应，使得表格的显示效果更加灵活。

附图说明

图1示出了现有技术方案示意图；

图2示出了本发明技术方案示意图；

图3示出了本发明主要流程图；

图4示出了本发明步骤S2（执行回调函数）的流程图；

图5示出了本发明中浏览器自身的事件循环机制示意图；

图6示出了本发明步骤S24（计算并更新表格高度）的流程图；

图7示出了本发明中浏览器自身的处理页面渲染的流程图。

具体实施方式

下面将结合附图，对本发明的技术方案进行清楚、完整地描述，显然，所描述的实施例是本发明一部分实施例，而不是全部的实施例。基于本发明中的实施例，本领域普通技术人员在没有做出创造性劳动前提下所获得的所有其他实施例，都属于本发明保护的范围。

在本发明的描述中，需要说明的是，术语“中心”、“上”、“下”、“左”、“右”、“竖直”、“水平”、“内”、“外”等指示的方位或位置关系为基于附图所示的方位或位置关系，仅是为了便于描述本发明和简化描述，而不是指示或暗示所指的装置或元件必须具有特定的方位、以特定的方位构造和操作，因此不能理解为对本发明的限制。此外，术语“第一”、“第二”、“第三”仅用于描述目的，而不能理解为指示或暗示相对重要性。

在本发明的描述中，需要说明的是，除非另有明确的规定和限定，术语“安装”、“相连”、“连接”应做广义理解，例如，可以是固定连接，也可以是可拆卸连接，或一体地连接；可以是机械连接，也可以是电连接；可以是直接相连，也可以通过中间媒介间接相连，可以是两个元件内部的连通。对于本领域的普通技术人员而言，可以根据具体情况理解上述术语在本发明中的具体含义。

本发明的基于vue实现表格高度自适应的方法，表格最佳展示高度的定义如下：1、页面不出现滚动条，并且页面中其他元素完全可见；2、表格可见高度最大。

常规获取表格最佳高度的思路：表格可见高度=页面可见高度-页面中除表格外的其他元素的高度。

本发明技术方案示意图，如图2所示。

本方案思路：表格可见高度=表格总高度-表格不可见高度。具体求解过程如下：

1、表格总高度求解方案：通过元素的scrollHeight属性可直接获得；

2、表格不可见高度求解方案。

2.1、当页面元素完全展开，超过页面可见高度时，页面不可见高度不为0，意味着必然会出现滚动条，用户通过滑动滚动条可以看到不可见区域中的内容。根据表格最大高度定义，要求页面不可见高度=0，而这部分的高度不会消失，只会转移，为了保证页面中其他元素完全可见，所以我们把这部分的高度转移到表格上，即表格不可见高度>=页面不可见高度；

2.2、其次，根据公式，表格可见高度=表格总高度-表格不可见高度，为了保证表格可见高度最大，那么表格不可见高度要最小。同时根据2.1已知，表格不可见高度>=页面不可见高度。所以，表格不可见高度=页面不可见高度。

如图3，根据本发明的基于vue实现表格高度自适应的方法，包括以下步骤：

步骤S2，执行回调函数，计算并更新表格高度。在监听到表格数据和复选框勾选状态数据变更后，执行回调函数，清除设置在表格上的高度值限制，使表格内容能够完全展开；vue更新所有DOM元素；获取最新的DOM元素的属性，计算并更新表格高度；表格可见高度=表格总高度-表格不可见高度；当页面元素完全展开，超过页面可见高度时，使得表格不可见高度=页面不可见高度；

步骤S3，浏览器根据更新后的表格高度绘制页面。

具体的，在步骤S1中，监听会触发页面组成元素的高度发生变化的事件。出现滚动条的原因，是因为页面内容的高度大于页面可视区域的高度。在本场景中，页面的内容高度由以下三者组成，表格的高度、页面顶部区域的高度、页面底部区域的高度，页面中除表格外的其他元素共同组成了页面顶部和底部区域。因此，需要监听会触发这三者高度变化的事件。

在实际项目中，主要涉及两点。其一：表格的多选操作，会导致表格上方出现一个元素，用于提示勾选数量，导致页面顶部区域的高度变化；其二：表格搜索条件的改变，会导致展示的表格数据的变化，会引发表格高度的变化。因此，本发明对这两个事件进行监听。事件监听是指在一个对象上注册一个事件处理函数，以便在该对象触发事件时执行相应的操作。当事件被触发时，浏览器会调用相应的事件处理函数，执行预定义的操作。事件监听是Web开发中常用的一种技术，可以为用户提供更加丰富的交互体验。常见的事件包括鼠标点击、键盘输入、页面滚动等。通过事件监听，我们可以在特定的事件发生时，执行自定义的JavaScript代码，从而实现更加动态和交互式的Web页面。

针对上述的两个事件，常规的监听实现方式如下：

//获取目标元素，如复选框，表单查询按钮

const targetElement = document.getElementById('target');

// 注册全选框点击事件监听器

targetElement.addEventListener('click', function() {

// 这里是自定义事件

});

但这种方式适合同步事件，如复选框勾选，接着就会引发表格上方区域高度的变化；不能用于异步事件，比如表单查询条件变化，表格高度并不会立即改变，需要向服务器发送请求，等待服务器返回数据，才能更新表格内容。

由于vue是数据驱动的框架，可以监听数据的变化并触发对应的回调函数，可以简化和统一监听逻辑，在vue内置的监听入口中一起处理。因此本发明用监听数据的方式来代替原本的事件监听。伪代码如下：

watch: {

/ /表格数据变化，会触发回调函数（this.recalculateTableHeight

）的执行

tableData() {

this.recalculateTableHeight();// 重新计算表格高度

},

//表格复选框勾选状态变化, 会触发回调函数（this.recalculateTableHeight）的执行

isChecked() {

this.recalculateTableHeight();// 重新计算表格高度

}

}。

具体的，在步骤S2中，在监听到表格数据和复选框勾选状态数据变更后，执行回调函数。如图4所示。

步骤S21，判断是否设置开启表格高度自适应，若没有开启则结束。

步骤S22，清除设置在表格上的高度值限制，使表格内容能够完全展开。即设置表格的高度属性值为空，使表格数据加载后，可以充分展开，从而使页面出现滚动条。伪代码如下：

resetTableHeight() {

// 获取表格元素

const table = document.getElementById('tableRef');

// 清除表格高度限制

table.style.height = '';

}。

步骤S23，vue更新所有DOM元素。

步骤S24，获取最新的DOM元素的属性，计算并更新表格高度。

伪代码如下：

recalculateTableHeight() {

// 没有开启表格高度自适应则结束

if (!this.open) return;

// 清除设置在表格上的高度限制

this.clearTableHeight();

// 在vue 更新所有 DOM 元素之后，页面渲染之前，计算并更新表格高度

this.$nextTick(this.updateTableHeight);

}。

具体的，在步骤S23中，vue更新所有DOM元素。

首先，对于计算并更新表格高度的时机选择，需要注意两个方面的问题。若执行操作过早，DOM元素还没有更新，获取到的各个元素高度不准确。表格的每一行元素(文档对象模型)还没有被挂载到文档对象模型树中，此时表格高度并不会增加，自然也不会出现滚动条，也就无法获取页面不可见部分的高度。若执行操作过晚，等页面已经渲染出来被用户所感知到，再进行表格高度的更新，那么用户就会看到页面右侧出现滚动条，过一会儿，页面右侧的滚动条突然消失，并且在表格内部出现了滚动条，这种用户体验就非常不自然。

为了解决这一技术问题，本发明采用如下改进技术手段实现。如图5所示，解析网页资源到最终呈现给用户的过程是由多个步骤组成的，包括解析静态资源文件、生成文档对象数和样式规则树、构建渲染树、布局、修改文档对象和绘制；本发明为了解决这一技术问题，利用了浏览器内置的事件循环机制，该机制的具体执行流程如下：

（1）检查宏任务队列是否为空。

若不为空，执行宏任务中的一个任务，检查微任务队列是否为空；

若为空，检查微任务队列是否为空。

（2）检查微任务队列是否为空。

若不为空，执行微任务队列中的所有微任务，直到队列为空。若微任务中又添加了新的微任务，直接放进本队列末尾。等队列为空，检查是否需要渲染；

若为空，检查是否需要渲染。

（3）检查是否需要渲染。

需要渲染更新视图，检查宏任务队列是否为空；

不需要渲染，检查宏任务队列是否为空。

由于本发明监听的是数据，在vue中，不是数据发生变化之后DOM立即发生变化，而是按照一定的逻辑更新DOM。首先，在宏任务中先对数据修改进行整合去重。其次，DOM更新的操作会被放在微任务队列的第一项执行，那么在后面的微任务执行时，就可以获得最新的DOM元素。而DOM元素只有在微任务结束之后，才会被浏览器绘制出来，呈现给用户。由此实现，在最佳时机计算并更新表格高度。

vue框架提供了一个nextTick方法，该方法就是基于微任务实现的，保证回调函数在宏任务之后（DOM已被更新）和页面绘制之前触发，具体对应图7中的布局（Layout）环节。既保证表格高度的正确性，又提供更好的用户体验。

具体的，在步骤S24中，计算并更新表格高度。如图6所示。

开始，步骤S241，根据class标识，查找当前页面。页面是由DOM元素组成，DOM元素有多种类型，常见的有div、table，都是DOM元素，简称为元素，表格即table元素，页面使用div元素，通过class或者id属性标识这些元素，并通过浏览器内置的方法查找到这些元素，比如getElementById、querySelector。获取包含表格的容器元素的引用，判断会出现滚动条的页面元素。通过JavaScript的closest()方法，获取到页面元素，该元素是一个文档对象，该对象包含页面的总高度、可见高度等属性值。可以通过元素.属性名的形式，获取到对应的属性值。

元素有多个内置的属性可以表征元素，比如x、y、height、width，分别表示元素的坐标、宽高，我们可以通过这些属性来进行元素的高度计算。

具体涉及两个DOM元素，分别是页面元素和表格元素，页面元素因为包含了表格，所以又称为容器元素。涉及到的用于计算表格最佳高度的高度属性有两个，分别是scrollHeight和clientHeight。其中获取各元素对应高度的伪代码如下：

// 获取表格元素

// 通过使用getElementById方法，根据给定的ID值（此处为'tableRef'）获取到对应的表格元素，并将其赋值给变量table

const table=document.getElementById('tableRef');

//获取表格元素的内容总高度

//使用scrollHeight属性，获取表格元素的内容高度，即滚动内容的总高度

//scrollHeight属性返回的是元素内容的总高度，包括由于溢出而被隐藏的部分

const tableHeight=table.scrollHeight;

//查找最近的页面元素

//使用closest方法，从当前的表格元素开始向上查找最近的页面元素

//this.scrollContainer是一个属性，表示页面的选择器

//最终找到的页面元素会被赋值给变量container

const container=table.closest(this.scrollContainer);

//获取页面的内容总高度

//使用scrollHeight属性，获取页面元素的内容高度，即滚动内容的总高度

const scrollHeight=container.scrollHeight;

//获取页面的可见高度

//使用clientHeight属性，获取页面元素的可见高度

//clientHeight属性返回的是元素在不包括滚动条等边框、边距的情况下的可见高度

const clientHeight=container.clientHeight；

然后，步骤S242，计算页面不可见高度，页面不可见高度=页面总高度-页面可见高度；获取页面总高度scrollHeight和页面可见高度clientHeight，并计算出页面不可见高度。容器元素的总高度scrollHeight和元素的可视区域高度clientHeight属性值，并计算滚动条可滚动高度diff，等于scrollHeight减去clientHeight。其中，scrollHeight属性值表示容器元素的总高度，包括不可见的部分，而clientHeight属性值表示元素的可视区域高度。滚动条可滚动高度diff即为元素不可见部分的高度，即需要通过滚动条才能查看的部分的高度。

接着，步骤S243，判断页面不可见高度是否大于0。若等于0，表示未出现滚动条，所有元素都完全可见，此时无需给表格设定高度。若大于0，则进入步骤S244。页面不可见高度若等于0，表示容器元素内部的内容高度，并未大于页面的可视区域高度，即未出现滚动条。

接着，步骤S244，计算表格可见高度，表格可见高度=表格总高度-表格不可见高度=表格总高度-页面不可见高度。具体实现如下：通过JavaScri的document.getElementById()方法，获取到表格元素，通过JavaScri的querySelector()方法，分别获取表头和表体元素。表格总高度=表头高度+表体总高度；各个元素的高度，具体获取方法为元素属性名。获取表格元素的总高度scrollHeight和表格的表头高度。表格是由表头（表格第一行，用于展示数据的名称）和表体（用于展示数据的内容）组成，其中，表头高度是固定的，表体是实际出现滚动条的区域。所以最终表体高度，等于表格元素的总高度，减去滚动条可滚动高度diff，再减去表头高度。

最后，步骤S245，更新表格高度。获取表体元素的引用，并更新它的高度属性值。

特别要强调的一点，通过浏览器内置的方法，获取到的页面总高度（scrollHeight）和页面可见高度（clientHeight）是经过四舍五入后的整数形式，存在精度丢失的情况。px是表示元素高度的基本单位，比如页面总高度（scrollHeight）的取值为100px，那么它的实际取值范围为99.50px到100.49px之间，偏差的绝对值小于等于0.50px；页面可见高度（clientHeight）的取值为50px，那么它的实际取值范围为49.50px到50.49px之间，偏差的绝对值小于等于0.50px。综上可知，scrollHeight和clientHeight的差值，即页面不可见高度（diff），偏差的绝对值要小于等于1px。若diff的偏差为+1px，那么表格可见高度的偏差就是-1px，即表格可见高度会比理论的最大高度小1px；若diff的偏差为-1px，那么表格可见高度的偏差就是+1px，即表格可见高度会比理论的最大高度大1px，进而导致页面出现滚动条。为了解决这个问题，本发明设置一个补偿高度为1px，那么diff的偏差范围在0到2px之间，即表格可见高度的偏差在-2px到0之间，不会出现大于0的情况，那么页面就一定不会因为浏览器的精度丢失问题而出现滚动条。

更新表格高度的伪代码如下：

updateTableHeight() {

//获取表格元素

const table=document.getElementById('tableRef');

//获取页面元素

const container=table.closest(this.scrollContainer);

//获取页面元素总高度

const scrollHeight = container.scrollHeight;

//获取页面元素可见高度

const clientHeight=container.clientHeight;

//获取页面元素不可见高度

const diff=scrollHeight-clientHeight;

//未出现滚动条

if (diff === 0) return;

//设置精度补偿

const offset=1;

//设置表格高度

table.style.height=`${table.scrollHeight-diff-offset}px`;

}。

步骤S3中，浏览器渲染页面的完整流程图，如图7所示，具体包含如下步骤：

S31.HTML解析：浏览器首先解析HTML文件，构建文档对象模型（DOM）树。DOM表示页面的结构，每个HTML元素都映射到DOM树上的一个节点。

S32.CSS解析：浏览器解析样式表（CSS），构建样式规则树。样式规则树表示了每个元素的样式信息，包括颜色、大小和位置。

S33.合并DOM和样式规则：浏览器将DOM树和样式规则树合并，生成渲染树。渲染树包含需要显示的节点和所述节点的样式信息。

S34.布局（Layout）：浏览器根据渲染树的信息计算每个节点的几何信息，包括位置和大小。

S35.绘制（Paint）：浏览器将布局后的节点绘制到屏幕上，绘制的结果是一系列的像素点。

S36.合成（Composite）：浏览器将绘制的图层按照正确的顺序合成，显示在屏幕上。

本发明中对表格高度的设置，即设置DOM节点的height属性，会影响浏览器渲染流程中的布局（Layout）步骤。具体来说，当你设置一个元素的height属性时，影响会从布局开始，而绘制和合成步骤会在之后依次进行。保证用户第一次看到的表格，就是已经设置了最佳高度的表格。不仅实现了滚动条只会出现在表格内部的效果，并且随着布局变化，表格的高度会动态的随之调整。无需测量页面中除表格外的其他元素的高度，减少开发人员的工作量，还可以指定是否开启表格高度自适应，使得表格的显示效果更加灵活。

通过把页面不可见高度转移到表格内部的方式，实现表格高度自适应的效果。

本发明流程图中或在此以其他方式描述的任何过程或方法描述可以被理解为表示包括一个或多个用于实现特定逻辑功能或过程的步骤的可执行指令的代码的模块、片段或部分，可以实现在任何计算机刻度介质中，以供指令执行系统、装置或设备，所述计算机可读介质可以是任何包含存储、通信、传播或传输程序以供执行系统、装置或设备使用。包括只读存储器、磁盘或光盘等。

在本说明书的描述中，参考术语“实施例”、“示例”等的描述意指结合该实施例或示例描述的具体特征、结构、材料或者特点包含于本发明的至少一个实施例或示例中。在本说明书中，对上述术语的示意性表述不必须针对的是相同的实施例或示例。此外，本领域的技术人员可以在不产生矛盾的情况下，将本说明书中描述的不同实施例或示例以及其中的特征进行结合或组合。

上述内容虽然已经示出和描述了本发明的实施例，可以理解的是，上述实施例是示例性的，不能理解为对本发明的限制，本领域的普通技术人员在本发明的范围内可以对上述实施例进行变化、修改、替换和变型等更新操作。

Claims

1.一种基于vue实现表格高度自适应的方法，其特征在于，所述方法包括以下步骤：

步骤S2，在监听到表格数据和复选框勾选状态数据变更后，执行回调函数，清除设置在表格上的高度值限制，使表格内容能够完全展开；vue更新所有DOM元素；获取最新DOM元素的属性，计算并更新表格高度；表格可见高度=表格总高度-表格不可见高度；当页面元素完全展开，超过页面可见高度时，使得表格不可见高度=页面不可见高度；

步骤S3，浏览器根据更新后的表格高度绘制页面。

2.根据权利要求1所述的基于vue实现表格高度自适应的方法，其特征在于，在步骤S1中，监听的事件包括：

3.根据权利要求2所述的基于vue实现表格高度自适应的方法，其特征在于，用监听数据的方式来触发回调函数，步骤包括:

1）监听表格数据变化；

2）重新计算表格高度；

3）监听表格复选框勾选状态变化；

4）重新计算表格高度。

4.根据权利要求1所述的基于vue实现表格高度自适应的方法，其特征在于，在步骤S2中，在监听到表格数据和复选框勾选状态数据变更后，执行回调函数。

5.根据权利要求1所述的基于vue实现表格高度自适应的方法，其特征在于，步骤S2包括：

步骤S23，vue更新所有DOM元素；

步骤S24，获取最新的DOM元素的属性，计算并更新表格高度。

6.根据权利要求5所述的基于vue实现表格高度自适应的方法，其特征在于，在步骤S23中，vue更新所有DOM元素包括：

7.根据权利要求5所述的基于vue实现表格高度自适应的方法，其特征在于，在步骤S24中，计算并更新表格高度，包括以下步骤：

步骤S241，根据class标识，查找页面；

步骤S245，更新表格高度。

8.根据权利要求7所述的基于vue实现表格高度自适应的方法，其特征在于，步骤S244中，表格不可见高度=页面不可见高度。

9.根据权利要求8所述的基于vue实现表格高度自适应的方法，其特征在于，设置一个补偿高度为1px，以保证计算得到的页面不可见高度值不会偏小，便不会导致表格可见高度偏大，而使页面出现滚动条。

10.根据权利要求9所述的基于vue实现表格高度自适应的方法，其特征在于，更新表格高度的步骤包括：

1）获取页面元素；

2）获取页面元素总高度；

3）获取页面元素可见高度；

4）获取页面元素不可见高度；

5）如果未出现滚动条；

6）设置精度补偿；

7）设置表格高度。