The introduction

In the recent development project, I met a requirement to display data in the unit of ten thousand in the form of tree. Because of the large amount of data, the first response was to adopt the “lazy loading” method. In order to facilitate users to quickly locate a node in the huge amount of data, the search function is also essential. Because of the “lazy loading” of data, the search is of course remote; Determine the needs of course, the first time to find online partners have realized the relevant components, and finally…. Implement one yourself (based on El-Tree because of the company’s Element UI); This is just a way of thinking of their own implementation, I hope you can point out more.

1. Lazy load tree implementation

At first, WE planned to use the lazy loading mode of El-Tree directly, but in the implementation process, we found that el-Tree did not expand the tree node after lazy loading, which was obviously not feasible. Lazy loading means loading data when the node is expanded. I use the non-lazy form to control the data, so I have the following implementation:

// Data format requirements
const treeData = [
    {
        label: Nodes' 1 '.id: '1'.children: [] // To show that the expanded arrow has child nodes, it needs to be wrapped
    },
    {
        label: Nodes' 2 '.id: '2'}]Copy the code

After getting the above data, I will do some processing on the data to load the child node data during expansion, as follows:

// After execution, the data becomes the following form
const treeData = [
    {
        label: Nodes' 1 '.id: '1'.children: [
            // When rendering nodes, use _state_ to indicate the loading status. If the network is interrupted, the loading fails
            //_state_ = 1, you can click reload to request data again, do not close the node and expand to load
            // Add a node-key to the el-tree to facilitate tree operations. See elementUI for details
            {id: '1-test'.'_state_': 0}]// To show that the expanded arrow has child nodes, it needs to be wrapped
    },
    {
        label: Nodes' 2 '.id: '2'}]Copy the code
  • Insert data into

This is where the lazy load tree is basically done

2. Remote search implementation

The remote search box mainly adopts the remote search function of El-SELECT, which will not be described here. It mainly introduces the method of searching the data obtained by the selected ID and inserting the tree node:

  • Required data format
const nodeData = {
    label: Nodes' 1 '.// Uppermost node
    id: '1'.children: [{label: '1-1 nodes'.id: 1-1 ' '.chilrend: []},
        {label: 'node 1-2'.id: '2'.chilrend: []}// Search for the node with the corresponding ID]}Copy the code

The data returned is the siblings of the node ID you want and all the siblings of the parent node and so on, up to the root node of the node branch; It sounds a little convoluted, but you can imagine if you expand this node you have all the nodes on the surface;

  • Insert data into the tree

3. Effect drawing display

conclusion

This is just a way for me to solve my business. I hope you can correct the shortcomings. At the same time also hope to get everyone’s encouragement, let me continue to work hard on the front of the road progress 😀.

Refer to the link

  • Vue
  • element-ui