Implementation of custom tree structure by Vue

Time:2020-10-21

Implementation of custom tree structure by Vue

  • It can be added and deleted dynamically
  • It can be dragged as a whole
  • If the content is also dynamic, replace the component content with input, select and other components
  • data structure
 treeData: [{
      name: '1',
      child: [
          { name: '2',
          child: [{ name: '1' }, { name: '2' }]
          },
          { name: '1',
          child: [{ name: '1' }, { name: '2' }]
          }
      ]
   }]

Implementation of custom tree structure by Vue

Ideas:

1. First write a public component treeitem
Implementation of custom tree structure by Vue

Implementation of custom tree structure by Vue

2. Add conditional judgment
Implementation of custom tree structure by Vue

3. Then recursively call its own component
Implementation of custom tree structure by Vue

4. Finally, the component is called directly
Implementation of custom tree structure by Vue

GitHub address link https://github.com/hellozdq/customTree