Vue3 实现根据左侧树实现右侧不同可更改页面的完整 demo

好的，下面是一个简单的 Vue3 实现根据左侧树实现右侧不同可更改页面的 demo。

首先我们需要一个数据源来表示左侧树的结构，可以使用一个数组来存储每个节点的信息。每个节点都需要包含一个唯一的 id，节点的名称和一个子节点列表。

const treeData = [
  {
    id: 1,
    name: 'Node A',
    children: [
      {
        id: 2,
        name: 'Node B',
        children: [
          {
            id: 3,
            name: 'Node C',
            children: []
          }
        ]
      },
      {
        id: 4,
        name: 'Node D',
        children: []
      }
    ]
  },
  {
    id: 5,
    name: 'Node E',
    children: []
  }
];

接下来，我们需要一个组件来渲染左侧树。这个组件可以使用递归方式来渲染每个节点和它的子节点。当用户点击一个节点时，我们需要将它的 id 存储到状态中。

<template>
  <div class="tree">
    <ul>
      <li v-for="node in treeData" :key="node.id">
        <div @click="handleNodeClick(node.id)">
          {{ node.name }}
        </div>
        <tree :tree-data="node.children" />
      </li>
    </ul>
  </div>
</template>

<script>
import { ref } from 'vue';

export default {
  name: 'Tree',
  props: {
    treeData: {
      type: Array,
      default: () => []
    }
  },
  setup(props) {
    const selectedNodeId = ref(null);

    const handleNodeClick = (nodeId) => {
      selectedNodeId.value = nodeId;
    };

    return {
      selectedNodeId,
      handleNodeClick
    };
  }
};
</script>

现在我们需要另一个组件来渲染右侧可更改页面。这个组件需要根据 `selectedNodeId` 状态来确定要显示哪个页面。我们可以使用一个 switch 语句来根据 `selectedNodeId` 返回不同的页面组件。

<template>
  <div class="page">
    <component :is="selectedPageComponent" />
  </div>
</template>

<script>
import { computed } from 'vue';

import PageA from './PageA.vue';
import PageB from './PageB.vue';
import PageC from './PageC.vue';
import PageD from './PageD.vue';
import PageE from './PageE.vue';

export default {
  name: 'Page',
  setup(props) {
    const selectedNodeId = ref(null);

    const selectedPageComponent = computed(() => {
      switch (selectedNodeId.value) {
        case 1:
          return PageA;
        case 2:
          return PageB;
        case 3:
          return PageC;
        case 4:
          return PageD;
        case 5:
          return PageE;
        default:
          return null;
      }
    });

    return {
      selectedNodeId,
      selectedPageComponent
    };
  }
};
</script>

最后，我们需要将两个组件组合在一起。我们可以使用一个容器组件来渲染左侧树和右侧可更改页面。

<template>
  <div class="container">
    <tree :tree-data="treeData" />
    <page />
  </div>
</template>

<script>
import Tree from './Tree.vue';
import Page from './Page.vue';

export default {
  name: 'Container',
  components: {
    Tree,
    Page
  },
  data() {
    return {
      treeData: [
        {
          id: 1,
          name: 'Node A',
          children: [
            {
              id: 2,
              name: 'Node B',
              children: [
                {
                  id: 3,
                  name: 'Node C',
                  children: []
                }
              ]
            },
            {
              id: 4,
              name: 'Node D',
              children: []
            }
          ]
        },
        {
          id: 5,
          name: 'Node E',
          children: []
        }
      ]
    };
  }
};
</script>

现在我们已经完成了一个简单的 Vue3 实现根据左侧树实现右侧不同可更改页面的 demo。