Vue3+ tree组件 实现根据左侧树实现右侧不同可更改页面的 demo

下面是一个简单的示例代码，使用 Vue3 + Element Plus 实现了根据左侧树实现右侧不同可更改页面的功能：

<template>
  <div class="container">
    <div class="left-panel">
      <el-tree :data="treeData" :default-expanded-keys="[1]" @node-click="handleNodeClick"></el-tree>
    </div>
    <div class="right-panel">
      <component :is="currentComponent"></component>
    </div>
  </div>
</template>

<script>
import { defineComponent, ref } from 'vue'
import HelloWorld from './components/HelloWorld.vue'
import About from './components/About.vue'

export default defineComponent({
  name: 'App',
  components: {
    HelloWorld,
    About
  },
  setup() {
    const currentComponent = ref('HelloWorld')

    const treeData = ref([
      {
        id: 1,
        label: 'Hello World',
        component: 'HelloWorld'
      },
      {
        id: 2,
        label: 'About',
        component: 'About'
      }
    ])

    const handleNodeClick = (data) => {
      currentComponent.value = data.component
    }

    return {
      currentComponent,
      treeData,
      handleNodeClick
    }
  }
})
</script>

在这个示例中，我们通过 `el-tree` 组件渲染左侧的树形菜单，并且使用 `component` 标签动态渲染右侧的组件。在 `treeData` 中，我们定义了每个节点的 id、label 和对应的组件名称。当用户点击树形菜单的某个节点时，我们将 `currentComponent` 的值设置为该节点对应的组件名称，从而触发 `component` 标签重新渲染右侧的组件。

需要注意的是，在这个示例中，我们只定义了两个组件，即 `HelloWorld` 和 `About`，你可以根据自己的需要添加更多的组件。另外，这里使用了 Element Plus 的组件库来实现左侧的树形菜单，你也可以使用其他的组件库或自己实现一个树形菜单组件。