在Vue中渲染树形控件的常见方法是使用递归组件。递归组件基于组件自身调用自身的方式来构建树形结构。
以下是一个简单的树形结构的组件示例：
1. <template> 2. <ul> 3. <li v-for="node in nodes" :key="node.id"> 4. {{ node.label }} 5. <tree :nodes="node.children" v-if="node.children" /> 6. </li> 7. </ul> 8. </template> 9. 10. <script> 11. export default { 12. name: "tree", 13. props: { 14. nodes: { 15. type: Array, 16. required: true, 17. }, 18. }, 19. }; 20. </script>
该组件将一个节点数组作为prop，然后遍历每个节点并将其渲染为列表项。如果一个节点有子节点，那么递归地呈现子节点。
以下是一个使用该组件的示例：
1. <template> 2. <div> 3. <h2>树形结构</h2> 4. <tree :nodes="nodes" /> 5. </div> 6. </template> 7. 8. <script> 9. import Tree from "@/components/Tree.vue"; 10. 11. export default { 12. components: { 13. Tree, 14. }, 15. data() { 16. return { 17. nodes: [ 18. { 19. id: 1, 20. label: "节点1", 21. children: [ 22. { 23. id: 2, 24. label: "节点1-1", 25. children: [ 26. { 27. id: 3, 28. label: "节点1-1-1", 29. }, 30. { 31. id: 4, 32. label: "节点1-1-2", 33. }, 34. ], 35. }, 36. { 37. id: 5, 38. label: "节点1-2", 39. }, 40. ], 41. }, 42. { 43. id: 6, 44. label: "节点2", 45. children: [ 46. { 47. id: 7, 48. label: "节点2-1", 49. }, 50. { 51. id: 8, 52. label: "节点2-2", 53. children: [ 54. { 55. id: 9, 56. label: "节点2-2-1", 57. }, 58. ], 59. }, 60. ], 61. }, 62. ], 63. }; 64. }, 65. }; 66. </script>
在这个示例中，我们创建了一个树形结构数据，并将其传递到Tree组件中，然后Tree组件会自动递归地呈现整个树形结构。
当然，您也可以使用其他树形控件库，例如Vue-Tree，Element-UI Tree等。这些库都有自己的组件，您可以按照它们的文档来使用。
若是使用的组件，一定要记着，
没有这一步，你得到的很可能会是一片只占有位置却没有数据的空白！！！
