Processing of tree structure data

When we do development , Sometimes let's deal with tree data . Today, let's talk about how to deal with tree data .

One . Two structures

(1) The back end returns a tree structure , This can be discussed with the backend .

(2) The back end returns a tiled structure , You need to convert through recursion .

Two . Passed element-ui Look at the tree structure .

Code :

<template>
  <div class="">
    <el-tree :data="data" :props="defaultProps" @node-click="handleNodeClick"></el-tree>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        data: [{
          label: ' Class A  1',
          children: [{
            label: ' second level  1-1',
            children: [{
              label: ' Level three  1-1-1'
            }]
          }]
        }, {
          label: ' Class A  2',
          children: [{
            label: ' second level  2-1',
            children: [{
              label: ' Level three  2-1-1'
            }]
          }, {
            label: ' second level  2-2',
            children: [{
              label: ' Level three  2-2-1'
            }]
          }]
        }, {
          label: ' Class A  3',
          children: [{
            label: ' second level  3-1',
            children: [{
              label: ' Level three  3-1-1'
            }]
          }, {
            label: ' second level  3-2',
            children: [{
              label: ' Level three  3-2-1'
            }]
          }]
        }],
        defaultProps: {
          children: 'children',
          label: 'label'
        }
      };
    },
    methods: {
      handleNodeClick(data) {
        console.log(data);
      }
    }
  };
</script>


<style scoped></style>

View :

Analysis of the structure :

  Analyze this structure :

Class A : Nothing there? , only one label ' Class A 1'

second level : stay children Keep writing inside label

Level three : Behind the second level children.

Level Four :......

3、 ... and . The actual development

  When adding new interface documents , Transfer to the upper layer id, Can be added .

  The same goes for deleting .