Vent-App/pages/filecenter/treeMenu/fileTreeMenu.vue

<template>
  <div>
    <ul>
      <tree-node
        v-for="node in treeData"
        :key="node.id"
        :node="node"
      ></tree-node>
    </ul>
  </div>
</template>

      <script>
const TreeNode = {
  props: ["node"],
};

export default {
  name: "FileTreeMenu",
  components: {
    TreeNode,
  },
  data() {
    return {
      treeData: [
        {
          id: 1,
          name: "Node 1",
          children: [
            {
              id: 2,
              name: "Node 1.1",
              children: [],
            },
            {
              id: 3,
              name: "Node 1.2",
              children: [],
            },
          ],
        },
        {
          id: 4,
          name: "Node 2",
          children: [],
        },
      ],
    };
  },
};
</script>

<style scoped>
ul {
  list-style-type: none;
  padding-left: 20px;
}
</style>