[vue-treeselect+el-table] When the amount of data is large, lazy loading, data echo, input box binding value, no arrow in front of the last node, etc.

vue-treeselect official website, poke I
recently made a function, el-table can edit the table, one column is the treeselect drop-down tree, the interface data is more than 900 kb, and the request took about 400 milliseconds. It is reasonable to say that the data is not very large, but Rendering is very slow. When you refresh or just enter the page, there is a 1.89-second lag, and when you click the drop-down tree or other el-select drop-downs in the same industry, the lag is very obvious.

This list needs to fill in hundreds of rows of data, and it will definitely not work without optimization.

The idea of ​​optimization is [lazy loading] . The idea is:
call the tree interface twice, pass nothing or pass 0 for the first time, depending on the requirements of the backend, the most important thing is to get the root node. As follows:
the child nodes are all empty, only the data of the root node. The second time is to call this interface, pass the parent id, get the child node under the parent id, and then every time you click, you will get the child node under yourself,
as follows:

With the idea, the following is the specific implementation:
This is the official website’s description of delayed loading. Maybe many people will not read the document, but if they know what is going on, they will not panic next time they encounter it.
To achieve lazy loading, loadOptions and children are null and
start to paste the code below:

  1. :ref=”‘treeselect’ + scope.$index” is because this column is required, there is verification, and it has nothing to do with lazy loading

  2. :options=“deptOptions” is to bind the tree data

  3. :normalizer=“normalizer” Change the format returned by the back end to the format of the tree itself
  4. :load-options=”loadOptions” lazy loading method
  5. @select= “node => treeHandleSelect(scope.$index, node)” Click the tree node to pass the id and code to the backend
  6. The option-label slot is to display the drop-down content, use tree to select your own, assign and echo through node
    7 , The value-label slot is to display the content of the text box, use the scope slot of el-table to assign and echo
  7. To introduce LOAD_CHILDREN_OPTIONS, otherwise it will always report an error that cannot be found, even if you have already logged out the
    import {LOAD_CHILDREN_OPTIONS} from ‘@riophae/vue-treeselect’

<TreeSelect
                  :ref="'treeselect' + scope.$index"
                  v-model="scope.row.assetTypeCode"
                  :options="deptOptions"
                  :normalizer="normalizer"
                  :load-options="loadOptions"
                  clearable
                  no -options-text= "No options available" 
                  noChildrenText= "No data" 
                  noResultsText= "No matches" 
                  loadingText= "Loading data" 
                  :matchKeys= "['name', 'code']" 
                  no - results-text= "No matching search structure" 
                  placeholder= "Please select an asset class name" 
                  style= "width: 100%"
                  :appendToBody="true"

                  @select="node => treeHandleSelect(scope.$index, node)"
                >
                  <div slot="option-label" slot-scope="{ node }" :style="{ marginLeft: !node.raw.children ? '16px' : '0' }">
                    [{{ node.raw.code }}]{{ node.raw.name }}
                  </div>
                  <div slot="value-label" slot-scope="{ node }">
                    {{ scope.row.assetTypeCode ? {{EJS0}} : '' }}{{ scope.row.assetTypeName }}
                  </div>
                </TreeSelect>

format

normalizer(node) {
      if (node.children && !node.children.length) {
        delete node.children
      }
      return {
        id: node.code,
        label: node.name,
        children: node.children,
      }
    },

When initializing, first adjust the tree interface and get the root node

// Initialization data
    initData() {
     //Pass nothing, get the root node      
      lazyTreeselect().then( res => {      
         for ( let index of res.data) {
           let modeInfo = {}
          modeInfo.id = index.id
          modeInfo.code = index.code
          modeInfo.label = index.name
          modeInfo.name = index.name
          modeInfo.children = null 
          this .deptOptions.push(modeInfo)
        }      
      })     
    },

When you click to get the child node, you need to use the loadOptions method

// lazy loading
    loadOptions({ action, parentNode, callback }) {    
      if (action === LOAD_CHILDREN_OPTIONS) {
         //Load the child node of the clicked node, parentNode.id is the parent node, 
        //Or the tree adjustment interface, pass the id into 
        lazyTreeselect({ id : parentNode.id }).then( response = > {
           let arr = []
           for ( let index of response.data) {
             let chiledModeInfo = {}
            chiledModeInfo.id = index.id
            chiledModeInfo.code = index.code
            chiledModeInfo.label = index.name
            chiledModeInfo.name = index.name
            childModeInfo.children = null 
            //The interface returned by the backend will normally have a field similar to isLeaf/hasLaef, and the last level is 1 or true 
            //If not, just ask the backend directly 
             if (index.hasLeaf == ' 1' ) {
               delete chiledModeInfo.children //Delete children when it is the last level, there will be no last level and there are small arrows to click
            }
            arr.push(chiledModeInfo)
          }
          parentNode.children = arr
        })
        callback()
      }
    },

When clicking on a tree node, pass both the code and id to the backend

treeHandleSelect(index, node) {     
      this.standTableList[index].assetTypeName = node.label
      this.standTableList[index].assetTypeName = node.name
      this.standTableList[index].assetTypeid = node.id
      this.standTableList[index].assetTypeCode = node.code
    },

After selecting the node and echoing it, call the save interface, pass the data to the backend, and then it’s done. We can also echo the details interface and echo it normally, because the slot of the text box above is already bound to the scope. The value of the row. field is equivalent to the value of your own custom value that has been saved by the backend.

In the process of writing code, an error is reported, and the node id and code are repeated, because the loadOption has not yet started to write, record it, and you will not panic next time you encounter it.

Leave a Comment

Your email address will not be published. Required fields are marked *