本發明公開了一種基于NG?ZORRO的表格滾動條位置控制方法及系統，屬于Angular的ElementRef和前端組件庫NG?ZORRO應用領域；所述的方法的具體步驟包括：S1創建變更規格頁面組件；S2對規格頁面進行變更，對頁面組件數據進行更新；S3在數據更新后的方法中，獲取規格列表數據和當前實例的規格數據m；S4通過方法計算表格滾動值；S5獲取需要設置的頁面元素；S6設置元素的滾動位置；本發明通過控制表格的顯示和滾動條的位置，相較于傳統的表格默認的展示方式，提高了數據閱覽的快捷方便和適應性，減少的用戶對數據的反復查找，從而提高了用戶使用產品的效率和產品使用的快捷和舒適性。

技術領域

本發明公開一種基于NG-ZORRO的表格滾動條位置控制方法及系統，涉及Angular的ElementRef和前端組件庫NG-ZORRO應用技術領域。

背景技術

目前隨著互聯網技術的飛速發展，網絡在人們的日常生活中越來越重要。在當前云計算、大數據的背景下，現代企業和政府的數據正在朝著大容量方向發展，隨著大數據平臺的新興技術的發展，人們獲得信息的方式越來越豐富。當數據較多且復雜時，人們傾向于閱覽最直接的數據，摒除雜亂無效數據的影響。當云環境上數據庫實例可選擇的規格種類較多的時候，針對其變更規格管理工作比較復雜。

Angular是一個強大的前端框架，其強大之處主要是可以把靜態頁面與動態數據綁定起來。其特點是數據的雙向綁定，代碼模塊化，可以封裝標簽、屬性和注釋，強大的依賴注入等；NG-ZORRO由阿里計算平臺事業部、阿里云等不同部門的開發人員在原業務組件的基礎上構建而成的前端UI組件庫，使用NG-ZORRO有很多原因，比如組件類型豐富，生態可以結合ant-design，結合阿里在自己項目中的經驗，版本更新迭代很快，界面漂亮一些等。

目前現有頁面表格，是默認展示全部數據，并默認展示頂部數據，未對數據進行區分處理和個性化展示。我們可以看到，用戶對于頁面的使用體驗和復雜數據的閱讀受制于當前這種展示方式，無法獲得更方便快捷貼心的服務，造成體驗差，系統使用復雜的情況，這是亟待解決的問題。

發明內容

本發明針對現有技術的問題，提供一種基于NG-ZORRO的表格滾動條位置控制方法及系統，所采用的技術方案為：一種基于NG-ZORRO的表格滾動條位置控制方法，所述的方法的具體步驟包括：

S1創建變更規格頁面組件；

S2對規格頁面進行變更，對頁面組件數據進行更新；

S3在數據更新后的方法中，獲取規格列表數據和當前實例的規格數據m；

S4通過方法計算表格滾動值；

S5獲取需要設置的頁面元素；

S6設置元素的滾動位置。

所述S2對規格頁面進行變更，對頁面組件數據進行更新的具體步驟包括：

S201在變更規格頁面組件中注入依賴ElementRef；

S202在變更規格頁面中編寫表格代碼，在ts中編寫頁面組件數據更新的方法。

所述S4通過方法計算表格滾動值的具體步驟包括：

S401設置表格樣式確定表格中一條數據的高度h；

S402遍歷規格數據列表，比較規格數據m和規格數據列表中第幾條數據一致，這個位置為n；

S403若當前規格在規格列表中不存在，則默認n為1；

S404判斷是否需要設置表格的滾動值；

S405若n為1，則不需要設置表格滾動值，或者設置表格滾動值為0；

S415若n大于1，則計算表格滾動值為(n-1)*h。