表格适配方法、电子设备及计算机可读存储介质组成比例

本申请提供了表格适配方法、电子设备及计算机可读存储介质，该方法包括：S1：实时获取目标界面的当前宽度；S2：检测当前宽度是否大于预设界面宽度；如果不大于，则执行S3；如果大于，则执行S4；S3：获取目标表格中每列的固定宽度，以生成第一适配表格；S4：基于当前宽度，对目标表格中每列的宽度进行赋值以获取第二适配表格。基于当前宽度W1和第一适配表格中第一列的宽度W2，确定空白列的宽度，空白列的宽度不小于W1

【技术实现步骤摘要】
表格适配方法、电子设备及计算机可读存储介质


[0001]本申请涉及前端开发的
，尤其涉及表格适配方法、电子设备及计算机可读存储介质。

技术介绍

[0002]表格是在前端开发中经常用到的基本界面元素之一，表格的UI(User Interface，用户界面)呈现对用户体验和数据呈现至关重要。由于不同终端设备的屏幕尺寸具有差异，在通过终端设备加载网页数据时，网页表格需要适应这些不同的终端设备屏幕，以达到较好的显示效果。
[0003]web前端开发中，基于vue.js的框架插件中的表格组件开发的表格，插件本身功能强大，但是对于展示行业数据、公司生产数据等需要大量的数据列的情况美观效果很不友好。
[0004]专利CN106681972A公开了一种表格显示方法，包括：计算表格中当前显示的所有列与当前的权重列表中权重值最高的列的列宽之和，所述权重列表中保存有待确定是否显示的各列及所述各列分别对应的权重值；检测所述列宽之和是否大于所述表格可显示的总宽度；若所述列宽之和小于或等于所述表格可显示的总宽度，则在所述表格中显示所述权重值最高的列，本文档来自技高网...

【技术保护点】

【技术特征摘要】
1.一种表格适配方法，其特征在于，所述方法包括：S1：实时获取目标界面的当前宽度；S2：检测所述当前宽度是否大于预设界面宽度；如果不大于，则执行S3；如果大于，则执行S4；S3：获取目标表格中每列的固定宽度，以生成第一适配表格；S4：基于所述当前宽度，对目标表格中每列的宽度进行赋值以获取第二适配表格。2.根据权利要求1所述的表格适配方法，其特征在于，所述实时获取目标界面的当前宽度，包括：利用监听器对所述目标界面的宽度进行实时监听，以获取所述当前宽度。3.根据权利要求2所述的表格适配方法，其特征在于，所述利用监听器对所述目标界面的宽度进行实时监听，以获取所述当前宽度，包括：利用监听器检测所述目标界面的宽度是否发生变化；如果发生变化，则获取所述目标界面变化后的宽度作为所述当前宽度；如果未发生变化，则不做操作。4.根据权利要求1所述的表格适配方法，其特征在于，所述获取目标表格中每列的固定宽度，以生成第一适配表格，包括：获取所述目标表格中每列的平均数据长度；基于所述目标表格中每列的平均数据长度，确定所述目标表格中每列的固定宽度，以生成所述第一适配表格。5.根据权利要求4所述的表格适配方法，其特征在于，所述基于所述目标表格中每列的平均数据长度，确定所述目标表格中每列的固定宽度，包括：基于所述目标表格中每列的平均数据长度，确定所述目标表格中每列的固定宽度并存储至预设数组；所述生成所述第一适配表格，包括：从所述预设数组中获取所述目标表格中每列的固定宽度，以生成所述第一适配表格。6.根据权利要求4所述的表格适配方法，其特征在于，所述基于所述当前宽度，对目标表格中每列的宽度进行...

【专利技术属性】
技术研发人员：甘栋，刘志蔚，
申请(专利权)人：上海乾臻信息科技有限公司，
类型：发明
国别省市：