vue3中如何实现导航栏目下再一个导航栏？

Question

如图所示，实现如上效果，要采用那种标签实现？
我采用的实element plus 我想到是el-tabs但是上面已经有一个了，在使用一个的话页面打开速度很慢，如果采用segmented是否可行？
注：头部导航我采用的是el-tabes这个标签

Answer 1

复杂导航:
使用 el-menu 和 el-submenu 提供更好的导航体验，适合复杂的多级菜单结构。
模块切换:
使用 el-tabs 提供直观的选项卡导航，适合展示大量内容或复杂结构。
选项较少:
使用 el-segmented 提供快速的选项切换体验，适合简单内容展示。

补充

el-tabs下面使用el-segmented时候页面打开很慢，而且页面变成空白处理

情况 1: 初始渲染问题

描述：当 el-tabs 包含大量内容或复杂组件时，初始渲染可能会导致页面加载缓慢。默认情况下，el-tabs 会同时渲染所有选项卡的内容，这会增加页面的初始加载时间。

解决方案：使用 lazy 属性按需加载选项卡内容，避免一次性渲染所有内容，从而提升页面加载速度。

<template>
  <el-tabs v-model="activeTab" type="card" lazy>
    <el-tab-pane label="Tab 1" name="1">
      <el-segmented v-model="activeSegment" :options="segmentOptions1" />
      <div v-if="activeSegment === '1-1'">内容 1-1</div>
      <div v-if="activeSegment === '1-2'">内容 1-2</div>
    </el-tab-pane>
    <el-tab-pane label="Tab 2" name="2">
      <el-segmented v-model="activeSegment" :options="segmentOptions2" />
      <div v-if="activeSegment === '2-1'">内容 2-1</div>
      <div v-if="activeSegment === '2-2'">内容 2-2</div>
    </el-tab-pane>
  </el-tabs>
</template>

<script>
export default {
  data() {
    return {
      activeTab: '1',
      activeSegment: '1-1',
      segmentOptions1: [
        { label: '二级菜单 1-1', value: '1-1' },
        { label: '二级菜单 1-2', value: '1-2' },
      ],
      segmentOptions2: [
        { label: '二级菜单 2-1', value: '2-1' },
        { label: '二级菜单 2-2', value: '2-2' },
      ],
    };
  },
};
</script>

情况 2: 数据加载问题

描述：如果 el-segmented 组件依赖于异步数据加载，而这些数据在选项卡切换时还未加载完成，可能会导致内容为空。

解决方案：延迟加载数据，确保在选项卡切换时，数据已经加载完成。可以在选项卡切换事件中触发数据加载，避免内容为空。

<template>
  <el-tabs v-model="activeTab" type="card" @tab-click="handleTabClick">
    <el-tab-pane label="Tab 1" name="1">
      <el-segmented v-model="activeSegment" :options="segmentOptions1" />
      <div v-if="activeSegment === '1-1'">内容 1-1</div>
      <div v-if="activeSegment === '1-2'">内容 1-2</div>
    </el-tab-pane>
    <el-tab-pane label="Tab 2" name="2">
      <el-segmented v-model="activeSegment" :options="segmentOptions2" />
      <div v-if="activeSegment === '2-1'">内容 2-1</div>
      <div v-if="activeSegment === '2-2'">内容 2-2</div>
    </el-tab-pane>
  </el-tabs>
</template>

<script>
export default {
  data() {
    return {
      activeTab: '1',
      activeSegment: '1-1',
      segmentOptions1: [
        { label: '二级菜单 1-1', value: '1-1' },
        { label: '二级菜单 1-2', value: '1-2' },
      ],
      segmentOptions2: [
        { label: '二级菜单 2-1', value: '2-1' },
        { label: '二级菜单 2-2', value: '2-2' },
      ],
    };
  },
  methods: {
    handleTabClick(tab) {
      // 在这里加载数据
      if (tab.name === '2') {
        this.loadSegmentOptions2();
      }
    },
    loadSegmentOptions2() {
      // 模拟异步数据加载
      setTimeout(() => {
        this.segmentOptions2 = [
          { label: '二级菜单 2-1', value: '2-1' },
          { label: '二级菜单 2-2', value: '2-2' },
        ];
      }, 1000);
    },
  },
};
</script>