[發明專利]一種基于vue的樹異步加載方法、裝置、設備和介質

在審

• 申請號: 202010650876.6
• 申請日: 2020-07-08
• 公開（公告）號: CN111984829A
• 公開（公告）日: 2020-11-24
• 發明（設計）人: 黃家昌;傅麗梅;楊輝;邱道椿
• 申請（專利權）人: 福建億能達信息技術股份有限公司
• 主分類號: G06F16/901
• 分類號: G06F16/901;G06F16/957;G06F16/958
• 代理公司: 福州市鼓樓區京華專利事務所(普通合伙) 35212
• 代理人: 林云嬌

1.一種基于vue的樹異步加載方法，其特征在于：包括下述步驟：

S1、瀏覽器頁面打開并渲染出樹形控件的所有一級父類節點，且從后端數據庫中篩選出所有一級父類節點的樹形數據存入渲染變量中并渲染在瀏覽器的頁面上，當樹形控件中任意一個一級父類節點被觸發加載子類數據的請求時，被觸發的一級父類節點則做為指定父類節點，進入步驟S2，否則結束；

S2、由接口返回指定父類節點的所有子節點的樹形數據，與指定父類節點的數據融合后存入渲染變量中，且連同指定父類節點的所有子節點一并渲染在瀏覽器的頁面上；

S3、當樹形控件中任意一個父類節點被觸發加載子類數據的請求時，則先將該父類節點賦為指定父類節點，回到步驟S2，否則結束流程。

2.根據權利要求1所述的一種基于vue的樹異步加載方法，其特征在于：所述樹形數據至少包括一個對象，每個對象通過下述三個屬性對應描述一個數據節點：

Title，用于存儲數據節點的名稱；

Key，用于存儲數據節點的唯一ID；

Children，用于存儲數據節點的子節點數據。

3.根據權利要求2所述的一種基于vue的樹異步加載方法，其特征在于：所述步驟S2中，由接口返回指定父類節點的所有子節點的樹形數據，與指定父類節點的數據融合后渲染在瀏覽器的頁面上的具體過程包括如下步驟：

S21、由接口返回指定父類節點的所有子類數據，該子類數據包含父類節點的Key值，根據該父類節點的Key值遍歷渲染變量中的父類節點，找出指定父類節點；

S22、將由接口返回的所有子節點的樹形數據賦值給該指定父類節點的children字段，從而實現指定父類節點與其子類數據的數據融合，融合后的數據形成所述渲染變量的新數據，并渲染在瀏覽器的頁面上。

4.根據權利要求3所述的一種基于vue的樹異步加載方法，其特征在于：所述步驟S21中，指定父類節點的查找方法是：采用遞歸方法，根據該子類數據的父類節點的Key值對渲染變量中的父類節點數據進行遍歷查詢，從而找出指定父類節點。

5.一種基于vue的樹異步加載裝置，其特征在于：包括：

樹形控件，用于在瀏覽器頁面上展現樹形數據的樣式，并提供各級數據節點觸發加載子類節點數據請求的功能；

篩選模塊，用于在瀏覽器頁面打開時，從后端數據庫中篩選出一級父類節點的樹形數據；

賦值模塊，用于在樹形控件中任意一個父類節點被觸發加載子類數據的請求時，則先將該父類節點賦為指定父類節點；

接口模塊，用于從后端數據庫中返回出指定父類節點的所有子類節點的樹形數據；

渲染模塊，用于在瀏覽器頁面打開時，渲染出樹形控件的所有一級父類節點，并通過篩選模塊得到所述一級父類節點的樹形數據并渲染在瀏覽器頁面上，以及在任意一個父類節點被觸發加載子類數據的請求時，渲染樹形控件的指定父類節點的所有子節點和該所有子節點的樹形數據。

6.根據權利要求5所述的一種基于vue的樹異步加載裝置，其特征在于：所述樹形數據至少包括一個對象，每個對象通過下述三個屬性對應描述一個數據節點：

Title，用于存儲數據節點的名稱；

Key，用于存儲數據節點的唯一ID；

Children，用于存儲數據節點的子節點數據。

7.根據權利要求6所述的一種基于vue的樹異步加載裝置，其特征在于：還包括：

遞歸模塊，用于根據該子類數據的父類節點的Key值對渲染變量中的父類節點數據進行遍歷查詢，遞歸地找出指定父類節點；

數據融合模塊，用于將由接口返回的所有子節點的樹形數據賦值給該指定父類節點的children字段，從而實現指定父類節點與其子類數據的數據融合，融合后的數據提供給所述渲染模塊。

8.一種電子設備，包括存儲器、處理器及存儲在存儲器上并可在處理器上運行的計算機程序，其特征在于，所述處理器執行所述程序時實現如權利要求1至4任一項所述的方法。

9.一種計算機可讀存儲介質，其上存儲有計算機程序，其特征在于，該程序被處理器執行時實現如權利要求1至4任一項所述的方法。