一种基于制造技术

本发明专利技术公开了一种基于

【技术实现步骤摘要】
一种基于vue实现表格高度自适应的方法


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

技术介绍

[0002]随着互联网技术的不断发展，网页应用越来越普及，其中数据展示是一个非常重要的功能
。
表格作为数据展示的主要形式之一，也越来越受到重视
。
而
vue
是一种数据驱动的框架，可以通过数据变化触发视图更新，简化开发流程
。
[0003]在网页开发中，表格通常会占据整个页面的一部分或者全部
。
表格数据量较大，显示在页面上时会占据较大的空间，不仅影响页面的布局，还可能导致表格内容超出整个页面的范围
。
因此，需要对表格的高度进行控制，以便在不超出整个页面范围的前提下，充分利用页面的剩余空间展示更多的数据，进而提高表格的使用效率和用户体验
。
[0004]为了计算出适合表格展示的最大高度，现有的解决方法基本上都是：先获取页面可视区域的高度，以及页面中除表格外的其他元素的高度（其他元素组成页面顶部区域和页面底部区域）
。
两者相减，那么留下的高度就是表格最大高度
。
如图1所示，表格最大高度
=
页面可见高度
‑
页面中除表格外的其他元素的高度
。
[0005]这种方式看似简单，但存在两个问题：缺陷1：需要手动测量，页面中除表格外的其他元素的高度
。
这个过程需要耗费一定的时间和精力，并且容易出现误差，进而影响表格的显示效果
。
[0006]缺陷2：随着页面操作，页面中除表格外的其他元素的高度可能会发生变化，由于表格的高度不会动态的随之调整，导致页面还是会出现滚动条
。

技术实现思路

[0007]针对现有技术存在的问题，本专利技术的目的在于提供一种基于
vue
实现表格高度自适应的方法，能够自动计算出适合表格展示的最大高度，无需手动测量页面中除表格外的其他元素的高度，并且随着布局变化，表格的高度会动态的随之调整
。
同时，还支持开启和关闭表格高度自适应的功能，使得表格的显示效果更加灵活
。
[0008]为实现上述目的，本专利技术提供一种基于
vue
实现表格高度自适应的方法，所述方法包括以下步骤：步骤
S1
，监听会触发页面组成元素的高度发生变化的事件；包括监听触发表格的高度变化的事件
、
页面顶部区域的高度变化的事件和页面底部区域高度变化的事件；步骤
S2
，在监听到表格数据和复选框勾选状态数据变更后，执行回调函数，清除设置在表格上的高度值限制，使表格内容能够完全展开；
vue
更新所有
DOM
元素；获取最新的
DOM
元素的属性，计算并更新表格高度；表格可见高度
=
表格总高度
‑
表格不可见高度；当页面元素完全展开，超过页面可见高度时，使得表格不可见高度
=
页面不可见高度；步骤
S3
，浏览器根据更新后的表格高度绘制页面
。
[0009]进一步，在步骤
S1
中，监听的事件包括：其一：表格的多选操作，会导致表格上方出现一个元素，用于提示勾选数量，导致页面顶部区域的高度变化；其二：表格数据的变化，会引发表格高度的变化
。
[0010]进一步，用监听数据的方式来触发回调函数，监听伪代码如下
watch:{//
监听表格数据变化
tableData(){this.recalculateTableHeight();//
重新计算表格高度
},//
监听表格复选框勾选状态变化
isChecked(){this.recalculateTableHeight();//
重新计算表格高度
}}。
[0011]进一步，在步骤
S2
中，在监听到表格数据和复选框勾选状态数据变更后，执行回调函数
。
[0012]进一步，步骤
S2
包括：步骤
S21
，判断是否设置开启表格高度自适应，若没有开启则结束；步骤
S22
，清除设置在表格上的高度值限制，使表格内容能够完全展开；步骤
S23
，
vue
更新所有
DOM
元素；步骤
S24
，获取最新的
DOM
元素的属性，计算并更新表格高度
。
[0013]进一步，在步骤
S23
中，
vue
更新所有
DOM
元素包括：使用
vue
的
nextTick
方法，在
vue
更新所有
DOM
元素之后再进行计算和更新表格高度的操作
。
[0014]进一步，在步骤
S24
中，计算并更新表格高度，包括以下步骤：步骤
S241
，根据
class
标识，查找页面；步骤
S242
，计算页面不可见高度，页面不可见高度
=
页面总高度
‑
页面可见高度；步骤
S243
，判断页面不可见高度是否大于0，若大于0，则进入步骤
S244
；步骤
S244
，计算表格可见高度，表格可见高度
=
表格总高度
‑
表格不可见高度
=
表格总高度
‑
页面不可见高度；步骤
S245
，更新表格高度
。
[0015]进一步，由于使用浏览器内置的方法，获取到的页面总高度（
scrollHeight
）和页面可见高度（
clientHeight
）是整数形式，存在小数位精度丢失的情况，其误差上限为
1px
，所以设置一个补偿值为
1px
，以保证计算得到的页面不可见高度值不会偏小
。
[0016]进一步，更新表格高度的伪代码如下
updateTableHeight(){//
获取页面元素
ꢀꢀꢀ
const container = table.closest(this.scrollContainer);
ꢀꢀꢀꢀ
// 获取页面元素总高度
ꢀꢀꢀꢀ
const scrollHeight = container.scrollHeight;
ꢀꢀꢀꢀ
// 获取页面元素可见高度
ꢀꢀꢀꢀ<本文档来自技高网...

【技术保护点】

【技术特征摘要】
1.
一种基于
vue
实现表格高度自适应的方法，其特征在于，所述方法包括以下步骤：步骤
S1
，监听会触发页面组成元素的高度发生变化的事件；包括监听触发表格的高度变化的事件
、
页面顶部区域的高度变化的事件和页面底部区域高度变化的事件；步骤
S2
，在监听到表格数据和复选框勾选状态数据变更后，执行回调函数，清除设置在表格上的高度值限制，使表格内容能够完全展开；
vue
更新所有
DOM
元素；获取最新
DOM
元素的属性，计算并更新表格高度；表格可见高度
=
表格总高度
‑
表格不可见高度；当页面元素完全展开，超过页面可见高度时，使得表格不可见高度
=
页面不可见高度；步骤
S3
，浏览器根据更新后的表格高度绘制页面
。2.
根据权利要求1所述的基于
vue
实现表格高度自适应的方法，其特征在于，在步骤
S1
中，监听的事件包括：其一：表格的多选操作，会导致表格上方出现一个元素，用于提示勾选数量，导致页面顶部区域的高度变化；其二：表格数据的变化，会引发表格高度的变化
。3.
根据权利要求2所述的基于
vue
实现表格高度自适应的方法，其特征在于，用监听数据的方式来触发回调函数，步骤包括
:1
）监听表格数据变化；2）重新计算表格高度；3）监听表格复选框勾选状态变化；4）重新计算表格高度
。4.
根据权利要求1所述的基于
vue
实现表格高度自适应的方法，其特征在于，在步骤
S2
中，在监听到表格数据和复选框勾选状态数据变更后，执行回调函数
。5.
根据权利要求1所述的基于
vue
实现表格高度自适应的方法，其特征在于，步骤
S2
包括：步骤
S21
，判断是否设置开启表格高度自适应，若没有开启则结束；步骤
S22
，清除设置在表格上的高度值限制，使表格内容能够完全展开；步骤
S23
，
vue
更新所有
DOM
元素；步骤
S24
，获...

【专利技术属性】
技术研发人员：田泽君，张金银，王乐珩，
申请(专利权)人：杭州比智科技有限公司，
类型：发明
国别省市：