vue3實現樹結構

Vue3實現樹結構可以使用遞歸組件的方式，以組件樹的形式展示節點和子節點。

1. 定義樹結構節點組件

<template>
  <div>
    {{ node.name }}
    <tree-node
      v-if="node.children && node.children.length"
      v-for="child in node.children"
      :node="child"
      :key="child.id"
    ></tree-node>
  </div>
</template>
<script>
import TreeNode from './TreeNode.vue'
export default {
  name: 'TreeNode',
  components: {
    TreeNode,
  },
  props: {
    node: {
      type: Object,
      required: true,
    },
  },
}
</script>

2. 在父組件中使用遞歸組件

<template>
  <div>
    <tree-node :node="treeData"></tree-node>
  </div>
</template>
<script>
import TreeNode from './TreeNode.vue'
export default {
  name: 'TreeView',
  components: {
    TreeNode,
  },
  data() {
    return {
      treeData: {
        name: 'Root',
        children: [
          {
            name: 'Node 1',
            children: [
              { name: 'Node 1.1' },
              { name: 'Node 1.2' },
            ],
          },
          {
            name: 'Node 2',
            children: [
              { name: 'Node 2.1' },
              { name: 'Node 2.2' },
            ],
          },
        ],
      },
    }
  },
}
</script>

以上代碼中，treeData是樹結構的數據，TreeNode是樹節點組件，通過遞歸組件的方式展示節點和子節點。

3. 樣式處理

為了使樹結構更清晰，可以添加樣式進行處理：

.tree-node {
  padding-left: 20px;
  position: relative;
}
.tree-node:before {
  content: '';
  position: absolute;
  top: 10px;
  left: 0;
  width: 10px;
  height: 1px;
  background-color: #ccc;
}
.tree-node:last-child:before {
  display: none;
}
.tree-node:before:last-child {
  height: 10px;
}
.tree-node:first-child:before {
  top: 0;
  height: 10px;
}
.tree-node:last-child:before:first-child {
  height: 10px;
}

這樣就可以實現一個簡單的樹結構了。