表格套用組件的控制方法、模塊和系統技術方案

本申請提供了一種表格套用組件的控制方法、模塊和系統。控制方法包括使用原始表格套用組件構建列表頁面；在處理業務交互時間的過程中，在原始表格套用組件的組件代碼中暴露出屬性；以及通過屬性控制是否開啟高性能表格套用組件，其中，高性能表格套用組件配置為使用原生div元素構建列表頁面。本發明專利技術提出的表格套用組件的控制方法和系統，可以適時且便捷的開啟高性能表格套用組件，從而在特定情況下使用純div元素代替el

【技術實現步驟摘要】
表格套用組件的控制方法、模塊和系統


[0001]本申請主要涉及列表組件開發領域，尤其涉及一種表格套用組件的控制方法、模塊和系統。

技術介紹

[0002]隨著前端技術得發展，組件封裝得技術和思想不斷提高，組件的數據規模也不斷增長，表格套用組件基于element
?
UI(UI組件庫)的el
?
table(表格組件)進行二次封裝，但同時也帶來UI框架的缺點。例如，el
?
table在擁有固定列的時候，會重復加載table，當數據量過大，表格列過多的時候，瀏覽器渲染表格會很耗時，因此，領域內尚缺少一種更合適、穩定且可靠的表格套用組件的控制方式。

技術實現思路

[0003]本申請要解決的技術問題是提供一種表格套用組件的控制方法、模塊和系統，可以適時且便捷的開啟高性能表格套用組件，從而在特定情況下使用純div元素代替el
?
table構建列表頁面，提升瀏覽器渲染表格速度，同時使表格交互操作不再卡頓，提高用戶體驗。
[0004]為解決上述技術問題，本申請提供了一種表格套用組件的控制方法，包括使用原始表格套用組件構建列表頁面；在處理業務交互時間的過程中，在所述原始表格套用組件的組件代碼中暴露出屬性；以及通過所述屬性控制是否開啟高性能表格套用組件，其中，所述高性能表格套用組件配置為使用原生div元素構建列表頁面。
[0005]可選地，所述原始表格套用組件通過UI組件庫element
?
ui的表格組件el
?
table構建所述列表頁面。
[0006]可選地，當滿足判斷條件時通過所述屬性開啟所述高性能表格套用組件，所述判斷條件包括當前列表頁面中的表格列數綜合超過預設值且所述當前列表頁面中包括至少一個固定列。
[0007]可選地，所述預設值的范圍為10～20。
[0008]可選地，通過所述屬性控制是否開啟高性能表格套用組件的步驟具體包括，當所述屬性賦值為true時控制開啟所述高性能finder，而當所述屬性賦值為false時控制關閉所述高性能finder。
[0009]可選地，還包括在通過所述高性能表格套用組件構建的列表頁面中，控制所述列表頁面的表格列跟隨表頭的拖拽實現寬度變化。
[0010]可選地，控制所述列表頁面的表格列跟隨表頭的拖拽實現寬度變化的步驟具體包括，通過所述表頭的類名監聽鼠標的mousemove和mouseup事件，計算拖拽的距離，從而改變所述表格列的寬度。
[0011]為解決上述技術問題，本申請的另一方面還提出了一種表格套用組件模塊的控制模塊，包括基礎構建模塊，配置為使用原始表格套用組件構建列表頁面，并在處理業務交互
時間的過程中，在所述原始表格套用組件的組件代碼中暴露出屬性；以及高性能構建模塊，配置為通過所述屬性控制是否開啟高性能表格套用組件，其中，所述高性能表格套用組件配置為使用原生div元素構建列表頁面。
[0012]本申請的另一方面還提出了一種表格套用組件的控制系統，包括存儲器，用于存儲可由處理器執行的指令；以及處理器，用于執行所述指令以實現上述的表格套用組件的控制方法。
[0013]本申請的另一方面還提出了一種存儲有計算機程序代碼的計算機可讀介質，所述計算機程序代碼在由處理器執行時實現上述的表格套用組件的控制方法。
[0014]與現有技術相比，本申請提供一種表格套用組件的控制方法和系統，針對現有技術的表格套用組件(例如是finder列表組件)控制方案進行改進，現有技術的表格頁面如具有固定列且出現列過多的情況時，列表渲染會很耗時，頁面會處于一段時間的白屏狀態，且頁面加載完成后，對于表格得交互操作，例如勾選，反選等操作會非常卡頓，用戶體驗很不友好。本申請可通過簡單的屬性值控制而開啟高性能finder，從而快速實現finder表格渲染，瀏覽器渲染表格時間節省了三倍以上，同時使得表格交互操作也不再卡頓，用戶體驗更加友好。
附圖說明
[0015]包括附圖是為提供對本申請進一步的理解，它們被收錄并構成本申請的一部分，附圖示出了本申請的實施例，并與本說明書一起起到解釋本申請原理的作用。附圖中：
[0016]圖1是本申請一實施例的一種表格套用組件的控制方法的示意流程圖；
[0017]圖2是本申請一實施例的一種表格套用組件的控制方法中構建UI框架的結構示意圖；
[0018]圖3是本申請一實施例的一種表格套用組件的控制模塊的架構圖；以及
[0019]圖4是本申請另外一實施例的一種表格套用組件的控制系統的架構圖。
具體實施方式
[0020]為了更清楚地說明本申請的實施例的技術方案，下面將對實施例描述中所需要使用的附圖作簡單的介紹。顯而易見地，下面描述中的附圖僅僅是本申請的一些示例或實施例，對于本領域的普通技術人員來講，在不付出創造性勞動的前提下，還可以根據這些附圖將本申請應用于其他類似情景。除非從語言環境中顯而易見或另做說明，圖中相同標號代表相同結構或操作。
[0021]如本申請和權利要求書中所示，除非上下文明確提示例外情形，“一”、“一個”、“一種”和/或“該”等詞并非特指單數，也可包括復數。一般說來，術語“包括”與“包含”僅提示包括已明確標識的步驟和元素，而這些步驟和元素不構成一個排它性的羅列，方法或者設備也可能包含其他的步驟或元素。
[0022]除非另外具體說明，否則在這些實施例中闡述的部件和步驟的相對布置、數字表達式和數值不限制本申請的范圍。同時，應當明白，為了便于描述，附圖中所示出的各個部分的尺寸并不是按照實際的比例關系繪制的。對于相關領域普通技術人員已知的技術、方法和設備可能不作詳細討論，但在適當情況下，所述技術、方法和設備應當被視為授權說明
書的一部分。在這里示出和討論的所有示例中，任何具體值應被解釋為僅僅是示例性的，而不是作為限制。因此，示例性實施例的其它示例可以具有不同的值。應注意到：相似的標號和字母在下面的附圖中表示類似項，因此，一旦某一項在一個附圖中被定義，則在隨后的附圖中不需要對其進行進一步討論。
[0023]在本申請的描述中，需要理解的是，方位詞如“前、后、上、下、左、右”、“橫向、豎向、垂直、水平”和“頂、底”等所指示的方位或位置關系通常是基于附圖所示的方位或位置關系，僅是為了便于描述本申請和簡化描述，在未作相反說明的情況下，這些方位詞并不指示和暗示所指的裝置或元件必須具有特定的方位或者以特定的方位構造和操作，因此不能理解為對本申請保護范圍的限制；方位詞“內、外”是指相對于各部件本身的輪廓的內外。
[0024]為了便于描述，在這里可以使用空間相對術語，如“在
……
之上”、“在
……
上方”、“在
……
上表面”、“上面的”等，用來描述如在圖中所示的一個器件或特征與其他器件或特征的空間位置關系。應當理解的是，空間相對術語旨在包含除了器件在圖中所描述的方位之外的在使用或操作中本文檔來自技高網...

【技術保護點】

【技術特征摘要】
1.一種表格套用組件的控制方法，其特征在于，包括如下步驟：使用原始表格套用組件構建列表頁面；在處理業務交互時間的過程中，在所述原始表格套用組件的組件代碼中暴露出屬性；以及通過所述屬性控制是否開啟高性能表格套用組件，其中，所述高性能表格套用組件配置為使用原生div元素構建列表頁面。2.如權利要求1所述的控制方法，其特征在于，所述原始表格套用組件通過UI組件庫element
?
UI的表格組件el
?
table構建所述列表頁面。3.如權利要求1所述的控制方法，其特征在于，還包括當滿足判斷條件時通過所述屬性控制開啟所述高性能表格套用組件，所述判斷條件包括當前列表頁面中的表格列數綜合超過預設值且所述當前列表頁面中包括至少一個固定列。4.如權利要求3所述的控制方法，其特征在于，所述預設值的范圍為10～20。5.如權利要求3或4所述的控制方法，其特征在于，通過所述屬性控制是否開啟高性能表格套用組件的步驟具體包括，當所述屬性賦值為true時控制開啟所述高性能finder，而當所述屬性賦值為false時控制關閉所述高性能finder。6.如權利要求1所述...

【專利技術屬性】
技術研發人員：趙海，陸凱杰，裴大鵬，
申請(專利權)人：商派軟件有限公司，
類型：發明
國別省市：