组件结合树形导航点击切换中间内容

组件页面内部自加树形导航栏

<template>
  <div> 左侧 </div>

  <!--  中间根据点击的导航显示，一个个封装好的组件  -->
  <div>
    <jjcsj v-if="currentPage === 'jjcsj'"></jjcsj>
    <jxsj v-else-if="currentPage === 'jxsj'"></jxsj>
    <cjqxt v-else-if="currentPage === 'cjqxt'"></cjqxt>
    <scqx v-else-if="currentPage === 'scqx'"></scqx>
    <zqjcqx v-else-if="currentPage === 'zqjcqx'"></zqjcqx>
  </div>

	<!--  右侧导航栏，用tree树形控件  -->
	<div>
    <div class="tree-container">
      <el-tree ref="treeRef" node-key="id" :data="treeData" default-expand-all highlight-current @node-click="onNodeClick"></el-tree>
    </div>
  </div>
    
    
<script setup>
import Xxxx from "./module/XY/Xxxx.vue";
import .........

// 树数据
const treeData = ref([
  {
    id: 'dyg',
    label: '第一个',
    children: [
      {
        id: 'xxx',
        label: '嘻嘻嘻',
      },
      {
        id: 'yyy',
        label: '有有有',
      }
    ]
  },
  {
    id: 'deg',
    label: '第二个',
    children: [
      {
        id: 'hhh',
        label: '好好好',
      }
    ]
  }
])

// 一开始进入展示的页面
const currentPage = ref('xxx')
// 树实例
const treeRef = ref(null)

/**
 * 单击树节点
 * @param data
 */
function onNodeClick(data) { // 这里只接收一个回调的参数即可
  currentPage.value = data.id
}

onMounted(() => {
  treeRef.value.setCurrentKey(currentPage.value) // 结合 node-key 属性使用，即一开始中间部分div就显示指定页面
})