Vue 中實現樹狀結構及多層嵌套的技巧及最佳實踐-Vue.js-PHP中文網

首頁

web前端

Vue.js

Vue 中實現樹狀結構及多層嵌套的技巧及最佳實踐

王林

Jun 25, 2023 am 08:28 AM

vue嵌套樹狀結構

Vue 是一個流行的 JavaScript 框架，它提供了許多方便的工具和功能來開發動態應用程式。其中一個常見的功能是展示樹狀結構資料。在本文中，我們將探討如何在 Vue 中實現樹狀結構及多層嵌套，並分享最佳實務。

樹狀結構

樹狀結構是一種層次結構，它由父節點和子節點組成。在 Vue 中，我們可以使用遞歸元件來展示樹狀結構資料。

首先，我們需要定義一個樹狀元件。這個元件將接受一個資料物件作為 props，然後遞歸地渲染自身和它的子元件。以下是一個範例程式碼：

<template>
  <ul>
    <li>{{ data.label }}</li>
    <tree-node v-if="data.children" v-for="child in data.children" :key="child.id" :data="child"></tree-node>
  </ul>
</template>

<script>
export default {
  name: 'TreeNode',
  props: {
    data: Object
  },
  components: {
    'tree-node': this
  }
}
</script>

在上面的程式碼中，我們定義了一個名為 TreeNode 的元件，它接受名為 data 的物件屬性作為輸入。我們使用遞歸元件來展示其子節點，只有當其子節點不為空時才會渲染子元件。我們使用 v-for 指令來遍歷子節點，並將其透過 props 傳遞給子元件。

現在，我們可以渲染我們的樹狀結構了。我們只需要呼叫 TreeNode 元件並將 data 傳遞給它作為 props。以下是一個範例程式碼：

<template>
  <div>
    <tree-node :data="treeData"></tree-node>
  </div>
</template>

<script>
import TreeNode from './TreeNode'

export default {
  name: 'Tree',
  components: {
    'tree-node': TreeNode
  },
  data () {
    return {
      treeData: {
        id: 1,
        label: 'Root',
        children: [
          {
            id: 2,
            label: 'Child 1'
          },
          {
            id: 3,
            label: 'Child 2',
            children: [
              {
                id: 4,
                label: 'Grandchild 1'
              },
              {
                id: 5,
                label: 'Grandchild 2'
              }
            ]
          }
        ]
      }
    }
  }
}
</script>

在上面的程式碼中，我們建立了一個名為 Tree 的元件，並在其中包含了一個 TreeNode 元件。我們在 data 中定義了一個包含多個層級的樹狀結構數據，並將其作為 props 傳遞給 TreeNode 元件。

多層嵌套

在 Vue 中，多層巢狀可以透過遞歸元件來實現。我們可以將多層嵌套的組件定義成一個遞歸結構，然後在父組件中嵌套這個組件，這樣就可以逐級向下嵌套，直到達到最深層。

以下是一個範例程式碼：

<template>
  <div>
    <tree-node :node="treeData"></tree-node>
  </div>
</template>

<script>
export default {
  data () {
    return {
      treeData: {
        id: 1,
        label: 'Root',
        children: [
          {
            id: 2,
            label: 'Child 1',
            children: [
              {
                id: 4,
                label: 'Grandchild 1'
              },
              {
                id: 5,
                label: 'Grandchild 2'
              }
            ]
          },
          {
            id: 3,
            label: 'Child 2',
            children: [
              {
                id: 6,
                label: 'Grandchild 3'
              },
              {
                id: 7,
                label: 'Grandchild 4'
              }
            ]
          }
        ]
      }
    }
  },
  components: {
    'tree-node': {
      props: {
        node: {
          type: Object,
          required: true
        }
      },
      template: `
        <ul>
          <li>{{ node.label }}</li>
          <tree-node v-if="node.children" v-for="child in node.children" :key="child.id" :node="child"></tree-node>
        </ul>
      `
    }
  }
}
</script>

在上面的程式碼中，我們透過在元件中定義一個名為 node 的屬性來傳遞資料。我們使用遞歸元件來展示其子節點，只有當其子節點不為空時才會渲染子元件。我們使用 v-for 指令來遍歷子節點，並將其透過 props 傳遞給子元件。