vue3+element-plus实现tabs选项卡，切换的时候展现各自树的页面

好的，下面是实现tabs选项卡切换时展现各自树的页面的步骤：

1. 在Vue3中定义两个组件，一个是包含选项卡的父组件，另一个是选项卡面板对应的子组件。

2. 在父组件中使用`el-tabs`和`el-tab-pane`组件实现选项卡，并将每个选项卡面板对应的子组件包含在`el-tab-pane`组件中。

<template>
  <el-tabs v-model="activeTab">
    <el-tab-pane label="Tab 1" name="1">
      <tree-1 />
    </el-tab-pane>
    <el-tab-pane label="Tab 2" name="2">
      <tree-2 />
    </el-tab-pane>
  </el-tabs>
</template>

<script>
import Tree1 from './Tree1.vue'
import Tree2 from './Tree2.vue'

export default {
  components: {
    Tree1,
    Tree2
  },
  data() {
    return {
      activeTab: '1'
    }
  }
}
</script>

3. 在每个子组件中分别实现对应的树形结构，并在`mounted`钩子函数中初始化树形结构。

<template>
  <div class="tree">
    <el-tree
      :data="treeData"
      :props="treeProps"
      :default-expanded-keys="['1']"
      node-key="id"
    />
  </div>
</template>

<script>
export default {
  data() {
    return {
      treeData: [
        {
          id: 1,
          label: 'Node 1',
          children: [
            {
              id: 2,
              label: 'Node 1-1'
            },
            {
              id: 3,
              label: 'Node 1-2'
            }
          ]
        }
      ],
      treeProps: {
        children: 'children',
        label: 'label'
      }
    }
  },
  mounted() {
    // 初始化树形结构
  }
}
</script>

4. 在父组件中使用`keep-alive`组件包含每个子组件，这样在切换选项卡时，之前打开的选项卡对应的子组件的状态就能被保留下来。

<template>
  <el-tabs v-model="activeTab">
    <el-tab-pane label="Tab 1" name="1">
      <keep-alive>
        <tree-1 />
      </keep-alive>
    </el-tab-pane>
    <el-tab-pane label="Tab 2" name="2">
      <keep-alive>
        <tree-2 />
      </keep-alive>
    </el-tab-pane>
  </el-tabs>
</template>

以上就是实现tabs选项卡切换时展现各自树的页面的步骤。