preface

In our actual development, due to the backend of nodes returned data quantity, and users often don’t want to see all the demand of the data, if the page is loaded, all the node data page loading, no doubt is a waste of user valuable time, as a result, there will be a node of the demand of the lazy loading, users want to which node, We show him what data (asynchronously sending a request from the background to get the current node data and render it).

How to implement lazy loading

Element ul el-tree Asynchronous loading mode

<el-tree
  :props="props"
  :load="loadNode"
  lazy
  show-checkbox>
</el-tree>
Copy the code

<script>
  export default {
    data() {
      return {
        props: {
          label: 'name'.children: 'zones'.isLeaf: 'leaf'}}; },methods: {
      loadNode(node, resolve) {
        if (node.level === 0) {
          return resolve([{ name: 'region' }]);
        }
        if (node.level > 1) return resolve([]);

        setTimeout((a)= > {
          const data = [{
            name: 'leaf'.leaf: true
          }, {
            name: 'zone'
          }];

          resolve(data);
        }, 500); }}};</script>
Copy the code

El-tree uses load and lazy attributes to load nodes asynchronously.

• Loda: Method of loading subtree data, valid only if lazy is true.
• Lazy: Indicates whether to load child nodes lazily. It must be used together with the load method.

In methods, the loadNode method returns us two arguments:

• Node: Returns the data of the current node
• Resolve: Number of render nodes (used to render after obtaining node data)

Let’s go straight to the sample code

<el-tree
      ref="tree"
      :props="props"
      :load="loadNode"
      node-key="id"
      // node-keyIs the unique identifier before all nodes:default-expanded-keys="nodeIdArr"
      // nodeIdArrThe node is expanded by default for asynchronous loadingarr, from the first root node to the last expanded nodeid, such as [1.2.12]
      lazy
      :highlight-current="true"// Click highlight @node-click="handleNodeClick"// Click the event, each click on the node is triggered, put back the current nodenode
    >
</el-tree>
Copy the code

export default {
  data() {
    return {
      props: {
        label: 'nodeName'.// Displays the name of the node when it is rendered
        children: 'zones'.// Whether the node has child nodes
        isLeaf: 'leaf'.// Determine the display node icon
      },
      resData: [].nodeIdArr: [].showNodeId: Number.nodeId: Number}; }, mounted() {this.init();
  },
  methods: {
    async init() {
      await this.getUserLocation();
    },
    // Click to select the event
    handleNodeClick(data, node) {
      console.log('data', data, node);
      this.nodeId = node.data.id;
    },
    // asynchronous tree leaf node lazy load logic
    async loadNode(node, resolve) {
      // Level 1 node processing
      if (node.level === 0) {
        await this.requestTree(resolve);
      }
      // Other nodes are processed
      if (node.level >= 1) {
        this.getIndex(node, resolve); }},// Asynchronously load the leaf node data function
    async getIndex(node, resolve) {
      const nodeId = node.data.id;
      await this.requestData(nodeId);
      resolve(this.resData);
    },
    // Load level-1 node data functions for the first time
    async requestTree(resolve) {
      await this.requestData(0);
      resolve(this.resData);
    },
    // Get the byte points under this node
    async requestData(val) {
      const res = await this.$api.org.node.allChildNodeByParent(val, { dismissLoading: true });
      const resDatas = res.data.data;
      _.forEach(resDatas, item => {
      // Assign node data to display node icon
        if (item.childCount === 0) {
          item.leaf = true; // Not a leaf node
        } else {
          item.leaf = false; // is a leaf node}});this.resData = resDatas;
      if (val === this.showNodeId) {
      // This step is to lazily load medium nodes and click on the desired node after rendering
        this.$refs.tree.setCurrentKey(this.showNodeId); }},// Obtain the nodeId array corresponding to the account
    async getUserLocation() {
      const res = await this.$api.org.node.getUserLocation({ dismissLoading: true });
      if (res.data.code === 0) {
        this.nodeIdArr = res.data.data;
        // showNodeId to prepare for the node to be clicked on after the node is successfully rendered
        this.showNodeId = res.data.data[res.data.data.length - 1];
      } else {
        this.$message({
          message: res.data.msg,
          type: 'error'}); ,}}}};</script>
Copy the code

Help please give a thumbs-up oh! Thank you!

Follow up on e-tree lazy loading add nodes, delete nodes, move nodes tutorial! Please follow me! Thank you, Old tie! If you have any questions, send a private message