A tree structure data rendering method, device and medium based on a VUE framework

Abstract

The application relates to a tree structure data rendering method, device and medium based on a VUE framework, the method comprising the following steps: acquiring a scroll event triggering instruction, calculating the number of tree nodes that should be displayed on a page according to the expansion and folding state of a corresponding current tree node, thereby calculating the height of a scrollable area according to the height of each tree node item; acquiring the nodes to be rendered according to the height of a visible area and the position of a scroll bar corresponding to the scroll event triggering instruction, obtaining a virtual list; when the virtual list corresponding to the visible area is the tree nodes of the same level, the DOM structure is reused in the virtual list; when the virtual list corresponding to the visible area contains the tree nodes of different levels, the DOM structure is reused according to the attributes of the tree nodes, and the tree node DOM structures of different levels are created or deleted, and finally the tree nodes are rendered to a front-end page. Compared with the prior art, the application has the advantages of high calculation efficiency, rapid node rendering and the like.

Description

Technical Field

[0001] This invention relates to the field of data processing technology, and in particular to a method, apparatus and medium for rendering tree-structured data based on the Vue framework. Background Technology

[0002] With the rapid development of technologies such as big data, cloud computing, and artificial intelligence, the amount of information and data in various industries is increasing, requiring different display methods. Tree controls are a good way to display hierarchical data relationships. The lightweight, two-way data binding Vue framework, combined with the el-tree component encapsulated in Element UI, can create a fully functional tree control. Tree components are recursive components; when any node is manipulated, the recursive method of the tree component itself is called. However, when the tree control has a large amount of data and many tree nodes, problems such as slow page loading, slow rendering, and poor performance can occur. Because manipulating the DOM in a browser is very costly, the addition, deletion, and modification of DOM elements are closely related to page performance. When processing tree nodes, the entire tree data is recursively traversed. Frequent DOM operations, such as frequent expansion and collapse of the tree control, will cause multiple reconstructions, resulting in browser lag and affecting user experience. For example, rendering 50,000 nodes directly on the page, or having 2,000 or more leaf nodes under some parent nodes, can easily lead to page crashes and affect system functionality.

[0003] Existing technologies include the pl-table plugin for large data tables based on the el-table component of Element UI. This plugin supports smooth rendering of large data lists with over 10,000 rows and nested tree-like data with up to 5,000 rows. When using the pl-table virtual scroll property, the table height and row height must be fixed. The principle and steps of pl-table for processing large data lists are as follows:

[0004] (1) Fix the table height and row height; (2) Listen for the scroll bar sliding event; (3) Calculate which child elements of the virtual element should be rendered based on the sliding distance; (4) Update the position of the virtual list elements. As the scroll bar slides continuously, the list elements and their positions are also updated to achieve the virtual scrolling effect.

[0005] This method solves the problem of slow loading of large amounts of tree-like data by loading in stages, only loading and rendering the next level of child nodes when the parent node is clicked. However, when one or more parent nodes have a large number of child nodes, a large amount of data still needs to be rendered, which can still lead to page lag and crashes.

[0006] In addition, invention publication number CN110825382A discloses a method for displaying a tree structure of large data in the front end. This solution achieves rapid rendering by flattening the tree structure tree, trading space for time; and by establishing a virtual display length to reduce the number of rendering nodes, thus achieving rendering effects for large amounts of data. The method is as follows:

[0007] Determine the original data that needs to be displayed as a tree structure on the front end, and use a recursive component to convert the original data into a one-dimensional flat array of the DOM structure.

[0008] Get the root node DOM and divide it into two absolutely positioned child nodes; by getting the height of the two child nodes and the scrollbar position, get the length of the virtual list to be displayed, and calculate the starting node and ending node to be displayed.

[0009] This solution converts recursion into a non-recursive implementation by changing the stack's access method. However, it breaks the connection between parent and child node data, identifying them only through fields such as node location and path. The tree component's operation methods must be implemented using custom methods, leading to lag issues when dealing with large amounts of node data. The query algorithm is complex and difficult to optimize. This technique lacks the built-in functions of inverted selection, dragging, adding, editing, and deleting nodes, limiting its applicability and reusability. Furthermore, its implementation using a jQuery tree component results in high maintenance costs. Summary of the Invention

[0010] The purpose of this invention is to overcome the performance problems of rendering large amounts of data based on the Vue framework and el-tree components in the prior art, and to provide a method, apparatus and medium for rendering tree structure data based on the Vue framework.

[0011] The objective of this invention can be achieved through the following technical solutions:

[0012] According to a first aspect of the present invention, a method for rendering tree-structured data based on the Vue framework is provided, comprising the following steps:

[0013] Pre-obtain the visible area height of the tree control on the front-end page and the height of each tree node item;

[0014] Obtain the scroll event trigger command, calculate the number of tree nodes that should be displayed on the page based on the current tree node's expanded / collapsed state corresponding to the scroll event trigger command, and then calculate the scrollable area height based on the height of each tree node item.

[0015] Based on the height of the visible area and the position of the scroll bar corresponding to the scroll event triggering instruction, the nodes to be rendered are obtained, and a virtual list is generated;

[0016] When the virtual list corresponding to the visible area contains tree nodes of the same level, the DOM structure is reused within that virtual list. When the virtual list corresponding to the visible area contains tree nodes of different levels, the DOM structure is reused according to the attributes of each tree node, and the DOM structures of tree nodes at different levels are created or deleted. Finally, the tree nodes are rendered to the front-end page.

[0017] Furthermore, a leafNum field is pre-set as a tree node attribute field, and the leafNum field is used to identify the number of child nodes under each tree node;

[0018] The calculation process for the number of tree nodes that should be displayed on the page includes:

[0019] Initialize the number of tree nodes to be displayed on the page to zero (m1). Determine the state of the first node in the tree control on the front-end page. If it is collapsed, increment m1 by one. If it is expanded, obtain the number P from the leafNum field and increment m1 by P+1. Then, determine the state of the child nodes of the expanded node and accumulate the value of m1. Continue this process until all child nodes of the expanded node have been traversed. Then, return to the next node in the tree control on the front-end page and accumulate the value of m1. Continue this process until all nodes in the tree control on the front-end page have been traversed to obtain the number of tree nodes to be displayed on the page.

[0020] Furthermore, the process of creating the virtual list includes:

[0021] Based on the scroll distance at the current moment corresponding to the scroll event triggering instruction and the height of each tree node item, the position of the starting node is calculated. Based on the height of the visible area and the height of each tree node item, the position of the ending node is calculated. The nodes between the starting node and the ending node are used as the nodes to be rendered in the virtual list, thus forming a virtual list.

[0022] Furthermore, the isChild and level fields are pre-defined as tree node attribute fields. The isChild field is used to identify whether the tree node is the last level leaf node; the level field is used to identify the level of the current tree node.

[0023] For tree nodes where both the level and isChild fields are the same, the DOM structure is reused; tree nodes at different levels are created or deleted.

[0024] Furthermore, tree nodes within the virtual list are displayed on the front-end page using tree-style CSS.

[0025] Furthermore, the expansion and collapse status of each tree node are monitored in real time. If a status change occurs, the height of the scrollable area and the virtual list are recalculated.

[0026] According to a second aspect of the present invention, a tree-structured data rendering apparatus based on the Vue framework is provided, comprising:

[0027] The settings module is used to set the visible area height of the tree control on the front-end page and the height of each tree node item; it calculates the number of tree nodes to be displayed on the page based on the expanded / collapsed state of the current tree node corresponding to the scroll event trigger instruction, and then calculates the scrollable area height based on the height of each tree node item; it obtains the nodes to be rendered based on the visible area height and the scroll bar position corresponding to the scroll event trigger instruction, thus obtaining a virtual list; and it adds a scrollable area container and a virtual list to the DOM root node; the height of the scrollable area container is consistent with the height of the real list; the height of the virtual list is consistent with the set visible area height.

[0028] The virtual module is used for scrolling operations of a virtual list within a scrollable area. When the front-end page is loaded for the first time, only the list items needed in the visible area are loaded. When the page scrolls, the virtual list in the visible area is dynamically calculated and obtained.

[0029] The display module is used to generate a virtual list of nodes to be rendered based on the scroll event and the visible area when the scroll event is triggered. When the virtual list corresponding to the visible area contains tree nodes of the same level, the DOM structure is reused within the virtual list. When the virtual list corresponding to the visible area contains tree nodes of different levels, the DOM structure is reused according to the attributes of each tree node, and the DOM structures of tree nodes of different levels are created or deleted. Finally, the tree nodes are rendered to the front-end page.

[0030] Furthermore, the device also includes:

[0031] The data module is used to recursively traverse the tree-structured data and add the disabled, isChild, leafNum, and level fields to each tree node;

[0032] The disabled field is used to identify whether a tree node is disabled.

[0033] The isChild field is used to identify whether a tree node is a leaf node of the last level.

[0034] The leafNum field is used to identify the number of child nodes under each tree node;

[0035] The level field is used to identify the level of the current tree node;

[0036] When a tree component is used in conjunction with checkboxes, the disabled field sets whether the current tree node is selectable; if the tree control is only for viewing, the disabled field is set to true; if the checkboxes of the tree control nodes are editable, the disabled field is set to false.

[0037] Furthermore, the calculation process for the number of tree nodes that should be displayed on the page includes:

[0038] The initial number of tree nodes to be displayed on the page is set to zero (m1). The state of the first node in the tree control on the front-end page is determined. If it is in a collapsed state, m1 is incremented by one. If it is in an expanded state, the number P is obtained according to the leafNum field, and m1 is incremented by P+1. Then, the state of the child nodes of the expanded node is determined, and the value of m1 is accumulated. This process continues until all child nodes of the expanded node have been traversed. Then, the process returns to the next node in the tree control on the front-end page and the value of m1 is accumulated. This process continues until all nodes in the tree control on the front-end page have been traversed, and the number of tree nodes to be displayed on the page is obtained.

[0039] For tree nodes where both the level and isChild fields are the same, the DOM structure is reused; tree nodes at different levels are created or deleted.

[0040] According to a third aspect of the present invention, a computer-readable storage medium is provided, on which a computer program is stored, the computer program being executed by a processor using the method described above.

[0041] The creation and rendering of tree node DOM elements in tree components is very time-consuming. When the parent node has a large number of nodes, the solution of this invention can reduce the recursive traversal of tree data, DOM creation and rendering, and page reconstruction and repainting.

[0042] Compared with the prior art, the present invention has the following advantages:

[0043] (1) This invention adds status and attribute fields to the original tree data of the el-tree component. The status field indicates the selected, expanded, etc., status, and the attribute field indicates the node level, the number of child nodes, and whether it is the last level leaf node. This facilitates the recursive search efficiency of parent and child nodes at different levels and improves the computational efficiency of searching or processing nodes.

[0044] (2) This invention uses a virtual tree node list to display tree node data. The height of the visible area of ​​the tree control on the front-end page and the height of each parent-child tree node item are generally fixed, but the height of the scrollable area changes according to the expanded and collapsed state of the tree node; therefore, the height of the scrollable area can be calculated through the expanded and collapsed state of the tree node; the height of the virtual list is set to be consistent with the height of the visible area of ​​the tree control, and the virtual tree node list generated by virtual scrolling is used to display the tree control on the page, rendering only the visible area and the tree node data above and below the visible area, controlling the number of VUE instances created and the number of DOM structure nodes rendered, so that the number of DOM nodes rendered on the page is kept at a low level, so as to achieve the effect of fast node rendering, which can support the rendering of large amounts of data and functions.

[0045] (3) This invention uses a DOM reuse method to save page reconstruction and repainting time. In a tree-structured DOM, tree nodes at the same level have the same DOM nesting structure; dynamic DOM reuse operations are performed according to the current tree node level, state, and attributes. For tree nodes at the same level with the same state and attributes in the visible area, their DOM structures can be directly reused, and tree nodes at different levels can be created or deleted; when the virtual tree node list contains tree nodes at the same level with the same attributes and state, DOM reuse can be maximized; by dynamically reusing the existing DOM structure, the creation and deletion operations of DOM are reduced, and the number of page reconstructions is reduced.

[0046] (4) This invention adds a batch search function, which uses Chinese and English commas to separate multiple search items for matching and filtering out multiple tree nodes needed by the user at one time, so as to improve the search efficiency for large amounts of tree structures.

[0047] (5) This invention improves the rendering and filtering performance of large-scale tree data when the total number of nodes in the tree control is 50,000 or more and the parent node has 3,000 or more child nodes. The page display is smooth and the existing el-tree component is modified to retain the methods and properties of the component itself, resulting in high reusability. Attached Figure Description

[0048] Figure 1 This is a flowchart illustrating a tree-structured data rendering method based on the VUE framework provided in an embodiment of the present invention.

[0049] Figure 2 This is a schematic diagram of a tree-structured data rendering device based on the VUE framework provided in an embodiment of the present invention. Detailed Implementation

[0050] To make the objectives, technical solutions, and advantages of the embodiments of the present invention clearer, the technical solutions of the embodiments of the present invention will be clearly and completely described below with reference to the accompanying drawings. Obviously, the described embodiments are only some embodiments of the present invention, and not all embodiments. The components of the embodiments of the present invention described and shown in the accompanying drawings can generally be arranged and designed in various different configurations.

[0051] Therefore, the following detailed description of the embodiments of the invention provided in the accompanying drawings is not intended to limit the scope of the claimed invention, but merely to illustrate selected embodiments of the invention. All other embodiments obtained by those skilled in the art based on the embodiments of the invention without inventive effort are within the scope of protection of the invention.

[0052] It should be noted that similar labels and letters in the following figures indicate similar items. Therefore, once an item is defined in one figure, it does not need to be further defined and explained in subsequent figures.

[0053] Terminology Explanation

[0054] The Document Object Model (DOM) is a standard interface specification defined by the W3C, providing a standard API for processing HTML and XML files. The DOM offers an access model for the entire document, viewing it as a tree structure with elements, attributes, and text. The DOM tree structure precisely describes the relationships between tags in an HTML document. After an HTML or XML document is parsed, it is transformed into a DOM tree, thus allowing manipulation of the HTML document through operations on the DOM tree. The DOM model not only describes the document's structure but also defines the behavior of node objects. Using the methods and properties of these objects, nodes and content in the DOM tree can be easily accessed, modified, added, and deleted. Because manipulating the DOM in a browser is very "expensive," the addition, deletion, and modification of DOM elements are closely related to page performance.

[0055] Example 1

[0056] This embodiment provides a tree structure data rendering method based on the Vue framework, including the following steps:

[0057] Pre-obtain the visible area height of the tree control on the front-end page and the height of each tree node item;

[0058] Obtain the scroll event trigger command, calculate the number of tree nodes that should be displayed on the page based on the current tree node's expanded / collapsed state corresponding to the scroll event trigger command, and then calculate the scrollable area height based on the height of each tree node item.

[0059] Based on the height of the visible area and the position of the scroll bar corresponding to the scroll event triggering instruction, the nodes to be rendered are obtained, and a virtual list is generated;

[0060] When the virtual list corresponding to the visible area contains tree nodes of the same level, the DOM structure is reused within that virtual list. When the virtual list corresponding to the visible area contains tree nodes of different levels, the DOM structure is reused according to the attributes of each tree node, and the DOM structures of tree nodes at different levels are created or deleted. Finally, the tree nodes are rendered to the front-end page.

[0061] In this embodiment, after determining the original data for displaying the tree structure on the front end, data traversal is performed to preprocess the tree data, and auxiliary fields are added as follows:

[0062] The disabled field indicates whether the tree node is disabled. A value of true indicates that the checkbox corresponding to the current tree node is disabled; a value of false indicates that the checkbox corresponding to the current tree node can be selected or deselected.

[0063] The `isChild` field: As a tree node attribute field, it indicates whether the tree node is the last level leaf node. When `isChild` is 0, it means that the current tree node is the parent node of any level, including several child nodes; when it is 1, it means that the current tree node is the last level leaf node.

[0064] The `leafNum` field: As a tree node attribute field, it identifies the number of child nodes under each tree node. If the last level of leaf nodes has no child nodes, then `leafNum` is 0.

[0065] The `level` field: This is an attribute field of a tree node, indicating the current level of the tree node. The root node has a level of 1, and the level of other tree nodes increases sequentially from the root node.

[0066] Bind the tree data with auxiliary fields to the el-tree component of Element UI.

[0067] Specifically, this method first needs to determine the visible area height h1 of the tree control on the front-end page, the height h2 of each tree node item, and the scrollable area height h3; the heights h1 and h2 are fixed, while h3 changes dynamically according to the expanded / collapsed state of the tree nodes. Based on the current expanded / collapsed state of the tree nodes, the theoretical number of tree nodes M that should be displayed on the page is calculated, thus yielding h3 = M × h2.

[0068] The specific calculation process for the height h3 of the rollable area includes:

[0069] Initialize the number of tree nodes to be displayed on the page to zero (m1). Determine the state of the first node in the tree control on the front-end page. If it is collapsed, increment m1 by one. If it is expanded, obtain the number P from the leafNum field and increment m1 by P+1. Then, determine the state of the child nodes of the expanded node and accumulate the value of m1. Continue this process until all child nodes of the expanded node have been traversed. Then, return to the next node in the tree control on the front-end page and accumulate the value of m1. Continue this process until all nodes in the tree control on the front-end page have been traversed to obtain the number of tree nodes to be displayed on the page.

[0070] In this embodiment, virtual scrolling of tree nodes is performed through a scrollable area. The implementation of virtual scrolling must satisfy the requirement that the page includes a three-layer structure: a scrollable list container, a data container, and data items. Visible list elements are re-rendered based on the scroll position. When a tree node is expanded, the currently displayed tree node overflows the visible area, displaying a scrollbar. After the scroll event is triggered, a virtual list is generated based on the visible area height h1, the scrollable area height h3, the scrollbar position, and the disabled, isChild, and leafNum properties of the current tree node. This virtual list serves as the list of tree nodes to be rendered.

[0071] Specifically, the process of creating the virtual list includes:

[0072] Based on the scroll distance at the current moment corresponding to the scroll event triggering instruction and the height of each tree node item, the position of the starting node is calculated. Based on the height of the visible area and the height of each tree node item, the position of the ending node is calculated. The nodes between the starting node and the ending node are used as the nodes to be rendered in the virtual list, thus forming a virtual list.

[0073] This embodiment performs dynamic DOM reuse operations based on the level, state, and attributes of tree nodes. Tree nodes at the same level have the same DOM nesting structure. When the visible area contains tree nodes at the same level, all tree node attributes and the `isChild` attribute are identical, allowing direct reuse of their DOM structure. When the visible area contains tree nodes at different levels, partial DOM reuse is achieved based on attributes, creating or deleting DOM elements for tree nodes at different levels, and then rendering the tree nodes to the front-end page.

[0074] Finally, to improve the filtering performance of large-volume tree-structured data, the method of this invention uses a front-end to set a filter input box, which supports multiple filter fields separated by commas. The input filter fields are passed as query parameters to the back-end, which then queries and returns the results uniformly.

[0075] The system monitors the expanded and collapsed states of each tree node in real time. If a state change occurs, the scrollable area height and virtual list are recalculated.

[0076] The most important aspects of the above work are controlling the virtual scrolling and dynamically calculating and monitoring the state and attributes of tree nodes to achieve dynamic DOM reuse. For a virtual scrolling list to simulate a realistic scrolling effect, it must meet the following two requirements:

[0077] (1) The scroll bar of the virtual scrolling tree node list is consistent with that of the ordinary tree node list.

[0078] (2) Virtual scrolling only renders the visible window area and some DOM elements on the top and bottom sides. The content of the page view is updated in real time as the scroll bar moves up and down, ensuring that the content of the view area is consistent with that of a normal long list.

[0079] The handling of virtual lists involves two concepts: "scrollable area" and "visible area." Taking a list using virtual scrolling as an example, the scrollable area refers to the maximum height the page element expands. Assuming the table needs to display 2000 data entries, and each list item is 30px high, then the scrollable area is 2000 x 30px high. When the user changes the current scroll value of the list's scrollbar, the content of the visible area changes. The visible area refers to a list with a height of 400px and a vertical scrollbar on the right; in this case, 400px is the visible area.

[0080] The main process of implementing the present invention is as follows: Figure 1 As shown, it includes:

[0081] 1) Determine the data for the tree structure to be displayed on the front end, traverse the data and perform preprocessing operations on the original tree data, adding disabled and isChild auxiliary fields. The data module receives the original tree data and outputs the processed tree data. Set the generated tree control to have checkboxes and to be in a non-disabled state. The tree data with auxiliary fields added is as follows, and the processed data is bound to el-tree.

[0082] 2) Calculate and set the visible area height and the height of each tree node, and use this as the output of the settings module.

[0083] The page's display height is equal to the visible area height h1, let's say 570px. The height of each parent-child node within the same tree structure is h2, typically 38px. The virtual list's height is the same as the visible area height, 570px, therefore 15 tree nodes can be seen within the current visible area.

[0084] 3) Perform virtual scrolling operations on tree nodes through scrollable areas.

[0085] When a scroll event is triggered, the height h3 of the scrollable area is calculated. Based on the scroll event, the visible area height, and the expanded and collapsed states of the tree nodes, the virtual list of nodes to be rendered is calculated and generated. The calculation method is as follows:

[0086] Listen for scrollbar scroll events and determine the theoretically required number of nodes, m1, to be displayed based on the current tree node's expanded / collapsed state. These nodes form a node list, list1, in sequence. The specific calculation rules are as follows: If a node is collapsed (expand = false), increment the node's position by 1, and then check other nodes at the same level; if a node is expanded (expand = true), obtain the positions of its child nodes based on the LeafNum property. Assuming LeafNum = P, increment the node's position by P + 1, then check the expand state of each of the P child nodes sequentially. Iterate through all nodes based on their expand state values, and sum the values ​​in a loop.

[0087] Calculate the height of the scrollable area as h3 = m1 × h2. The height of the scrollable area changes dynamically according to the unfolded / folded state of the node.

[0088] Calculate the ratio of the scroll distance to the height of the tree node item to get m2. Theoretically, m2 nodes are hidden before the starting node.

[0089] Mapping m2 to list1, the (m2+1)th node in list1 becomes the starting node, with a position of (m2+1)×h2. The visible area height and the height of each tree node item are fixed. The (m2+(h1 / h2))th node becomes the ending node, with a position of (m2+1)×h2+h1.

[0090] The nodes between the start node and the end node are the nodes to be rendered in the virtual list, forming a virtual list.

[0091] Monitor the expanded / collapsed state of the nodes. If a node is expanded or collapsed, the scroll bar position changes, and the starting node, ending node, theoretically displayable number of nodes m1, and virtual node list are recalculated.

[0092] 4) Perform dynamic DOM reuse operations based on the tree node's level, expanded / collapsed state, and attributes. Tree nodes at the same level have the same level value and consistent DOM nesting structure. When there are tree nodes at the same level within the visible area, and all tree node attributes and the isChild property are consistent, their DOM structure can be directly reused; tree nodes at different levels can be created or deleted. Through dynamic DOM reuse, the creation and deletion of DOM elements on the page are reduced, thus reducing page reconstruction and repainting.

[0093] 5) Use tree-style CSS to display the tree nodes in the virtual list on the page.

[0094] 6) Enter multiple filter criteria separated by Chinese or English commas into the filter box of the tree component. Only tree nodes that meet the filter criteria will be displayed on the page.

[0095] The above is an introduction to the method embodiments. The following describes the solution of the present invention further through device embodiments.

[0096] like Figure 2 As shown, this embodiment also provides a tree structure data rendering device based on the Vue framework, including:

[0097] The data module prepares the tree structure data required for the el-tree component. It recursively traverses the original tree structure data, appending `disabled`, `isChild`, `leafNum`, and `level` fields to each tree node. When the tree component is used with checkboxes, the `disabled` field sets whether the current tree node is selectable. If the tree control is only for viewing, the `disabled` field is set to `true`; if the checkboxes of the tree control node are editable, the `disabled` field is set to `false`. To distinguish the levels of tree nodes, `isChild` is set to 1 for the last-level leaf node, and 0 for others. The `level` value is set, with `level` = 1 for the root node and incrementing sequentially for others. `leafNum` represents the child node data of a node; if a node has no child nodes, `leafNum` = 0. The preprocessed tree data includes auxiliary fields to facilitate node state control and parent-child node lookup calculations.

[0098] The settings module is used to set the visible area height of the tree control on the front-end page and the height of each tree node item; it calculates the number of tree nodes to be displayed on the page based on the expanded / collapsed state of the current tree node corresponding to the scroll event trigger instruction, and then calculates the scrollable area height based on the height of each tree node item; it obtains the nodes to be rendered based on the visible area height and the scroll bar position corresponding to the scroll event trigger instruction, thus obtaining a virtual list; and it adds a scrollable area container and a virtual list to the DOM root node; the height of the scrollable area container is consistent with the height of the real list; the height of the virtual list is consistent with the set visible area height.

[0099] The virtual module is used for scrolling operations of a virtual list within a scrollable area. The virtual list handles changes in the visible area after scrolling. When the front-end page is loaded for the first time, only the list items needed in the visible area are loaded. When the page scrolls, the virtual list in the visible area is dynamically calculated and obtained.

[0100] The display module generates a virtual list of nodes to be rendered based on the scroll event and the visible area when a scroll event is triggered. It then dynamically reuses the DOM based on the current tree node's level, state, and attributes, and displays the nodes in the virtual list. For tree nodes at the same level with the same state and attributes within the visible area, their DOM structure can be directly reused. For tree nodes at different levels, they are created or deleted. By listening to the state and events of the page's tree control nodes (such as changing the selected state of a node), the module indirectly manipulates the real DOM by changing the virtual DOM object.

[0101] The filtering module supports users to input multiple filter conditions, enabling batch search functionality and displaying only the required node content.

[0102] In the context of this invention, a machine-readable medium can be a tangible medium that may contain or store a program for use by or in conjunction with an instruction execution system, apparatus, or device. A machine-readable medium can be a machine-readable signal medium or a machine-readable storage medium. Machine-readable media can include, but are not limited to, electronic, magnetic, optical, electromagnetic, infrared, or semiconductor systems, apparatus, or devices, or any suitable combination of the foregoing. More specific examples of machine-readable storage media include electrical connections based on one or more wires, portable computer disks, hard disks, random access memory (RAM), read-only memory (ROM), erasable programmable read-only memory (EPROM or flash memory), optical fibers, portable compact disk read-only memory (CD-ROM), optical storage devices, magnetic storage devices, or any suitable combination of the foregoing.

[0103] The preferred embodiments of the present invention have been described in detail above. It should be understood that those skilled in the art can make numerous modifications and variations based on the concept of the present invention without creative effort. Therefore, all technical solutions that can be obtained by those skilled in the art based on the concept of the present invention through logical analysis, reasoning, or limited experimentation on the basis of existing technology should be within the scope of protection defined by the claims.

Claims

1. A tree-structured data rendering method based on the Vue framework, characterized in that, Includes the following steps: Pre-obtain the visible area height of the tree control on the front-end page and the height of each tree node item; Obtain the scroll event trigger command, calculate the number of tree nodes that should be displayed on the page based on the current tree node's expanded / collapsed state corresponding to the scroll event trigger command, and then calculate the scrollable area height based on the height of each tree node item. Based on the height of the visible area and the position of the scroll bar corresponding to the scroll event triggering instruction, the nodes to be rendered are obtained, and a virtual list is generated; When the virtual list corresponding to the visible area contains tree nodes of the same level, the DOM structure is reused within the virtual list; when the virtual list corresponding to the visible area contains tree nodes of different levels, the DOM structure is reused according to the attributes of each tree node, and the DOM structure of tree nodes at different levels is created or deleted, and finally the tree nodes are rendered to the front-end page. A leafNum field is pre-defined as a tree node attribute field, and the leafNum field is used to identify the number of child nodes under each tree node; The calculation process for the number of tree nodes that should be displayed on the page includes: The number of tree nodes to be displayed on the initialization page If the value is zero, check the state of the first node in the tree control on the front-end page. If it is in a collapsed state, then... Add one; if the display is expanded, the number is obtained from the leafNum field. ,Will add Then, determine the state of the child nodes of the expanded node and perform... The values ​​are accumulated until all child nodes of the expanded node have been traversed, then the process returns to the next node in the tree control on the front-end page. The values ​​are accumulated until all nodes in the tree control on the front-end page have been traversed, and the number of tree nodes that should be displayed on the page is obtained. The process of creating the virtual list includes: Based on the scroll distance at the current moment corresponding to the scroll event triggering instruction and the height of each tree node item, the position of the starting node is calculated. Based on the height of the visible area and the height of each tree node item, the position of the ending node is calculated. The nodes between the starting node and the ending node are used as the nodes to be rendered in the virtual list, thus forming a virtual list.

2. The tree structure data rendering method based on the Vue framework according to claim 1, characterized in that, The isChild and level fields are pre-defined as tree node attribute fields. The isChild field is used to identify whether the tree node is the last level leaf node; the level field is used to identify the level of the current tree node. For tree nodes where both the level and isChild fields are the same, the DOM structure is reused; tree nodes at different levels are created or deleted.

3. The tree structure data rendering method based on the Vue framework according to claim 1, characterized in that, Display tree nodes within a virtual list on the front-end page using tree-style CSS.

4. The tree structure data rendering method based on the Vue framework according to claim 1, characterized in that, The system monitors the expanded and collapsed states of each tree node in real time. If a state change occurs, the scrollable area height and virtual list are recalculated.

5. A tree-structured data rendering device based on the Vue framework, characterized in that, include: The settings module is used to set the visible area height of the tree control on the front-end page and the height of each tree node item; Based on the expanded / collapsed state of the current tree node corresponding to the scroll event trigger command, calculate the number of tree nodes that should be displayed on the page, and then calculate the height of the scrollable area based on the height of each tree node item. Based on the visible area height and the scrollbar position corresponding to the scroll event trigger instruction, obtain the node to be rendered and get the virtual list; add a scrollable area container and the virtual list to the DOM root node; the height of the scrollable area container is consistent with the height of the real list; the height of the virtual list is consistent with the set visible area height. The virtual module is used for scrolling operations of a virtual list within a scrollable area. When the front-end page is loaded for the first time, only the list items needed in the visible area are loaded. When the page scrolls, the virtual list in the visible area is dynamically calculated and obtained. The display module is used to generate a virtual list of nodes to be rendered based on the scroll event and the visible area when the scroll event is triggered. When the virtual list corresponding to the visible area contains tree nodes of the same level, the DOM structure is reused within the virtual list. When the virtual list corresponding to the visible area contains tree nodes of different levels, the DOM structure is reused according to the attributes of each tree node, and the DOM structure of tree nodes of different levels is created or deleted. Finally, the tree nodes are rendered to the front-end page. A leafNum field is pre-defined as a tree node attribute field, and the leafNum field is used to identify the number of child nodes under each tree node; The calculation process for the number of tree nodes that should be displayed on the page includes: The number of tree nodes to be displayed on the initialization page If the value is zero, check the state of the first node in the tree control on the front-end page. If it is in a collapsed state, then... Add one; if the display is expanded, the number is obtained from the leafNum field. ,Will add Then, determine the state of the child nodes of the expanded node and perform... The values ​​are accumulated until all child nodes of the expanded node have been traversed, then the process returns to the next node in the tree control on the front-end page. The values ​​are accumulated until all nodes in the tree control on the front-end page have been traversed, and the number of tree nodes that should be displayed on the page is obtained. The process of creating the virtual list includes: Based on the scroll distance at the current moment corresponding to the scroll event triggering instruction and the height of each tree node item, the position of the starting node is calculated. Based on the height of the visible area and the height of each tree node item, the position of the ending node is calculated. The nodes between the starting node and the ending node are used as the nodes to be rendered in the virtual list, thus forming a virtual list.

6. A computer-readable storage medium, characterized in that, The computer-readable storage medium stores a computer program, which is executed by a processor according to any one of claims 1 to 5.

Images