Vue3 + Element Plus 使用 el-radio-group 实现标签式导航

实例代码：

<script setup lang="ts" name="ReceiveOrder">
import { ref } from "vue";

const activeTab = ref("all");
const tabs = [
  { label: "全部", value: "all" },
  { label: "草稿箱", value: "draft" },
  { label: "待提交", value: "pendingSubmit" },
  { label: "待受理", value: "pendingAccept" },
  { label: "待审查", value: "pendingReview" },
  { label: "待补正", value: "pendingCorrection" },
  { label: "待发放", value: "pendingIssue" },
  { label: "已发放", value: "issued" }
];
</script>

<template>
  <div class="software-registration-container">
    <!-- 使用 el-radio-group 实现标签式导航 -->
    <el-radio-group v-model="activeTab" class="status-tabs">
      <el-radio-button v-for="tab in tabs" :key="tab.value" :label="tab.value">
        {{ tab.label }}
      </el-radio-button>
    </el-radio-group>

    <!-- 内容区域（根据实际需求补充） -->
    <div class="content-area">Current Tab: {{ activeTab }}</div>
  </div>
</template>

<style scoped lang="scss">
.software-registration-container {
  padding: 20px;
}

.status-tabs {
  margin-bottom: 20px;
  width: 100%;
}

/* 调整 Element Plus 默认样式 */
:deep(.el-radio-button__inner) {
  border-radius: 0 !important;
  border-left: 1px solid var(--el-border-color);
}

:deep(.el-radio-button:first-child .el-radio-button__inner) {
  border-left: 1px solid var(--el-border-color);
  border-radius: 4px 0 0 4px;
}

:deep(.el-radio-button:last-child .el-radio-button__inner) {
  border-radius: 0 4px 4px 0;
}

:deep(.el-radio-button__orig-radio:checked + .el-radio-button__inner) {
  background-color: var(--el-color-primary);
  border-color: var(--el-color-primary);
  color: white;
  box-shadow: none;
}
</style>

运行效果：

实现要点说明：

1. 组件选择：使用 el-radio-group + el-radio-button 组合实现导航标签效果，相比 Tabs 组件更灵活且更接近截图样式

2. 响应式状态：通过 v-model 绑定当前激活的选项卡状态

3. 样式覆盖：

   • 去除按钮之间的间隔

   • 调整圆角为直角风格

   • 自定义激活状态的背景色和文字颜色

   • 保持整体边框连贯性

4. 扩展性：

   • tabs 数据采用数组配置，方便后续维护

   • 通过 CSS 变量保持与 Element Plus 主题的一致性

   • 内容区域可根据实际需求接入表格或其他组件

5. 布局优化：

   • 使用 100% 宽度适应容器

   • 添加适当的内边距

   • 保持与 Element Plus 默认设计语言一致

效果特点：

• 水平排列的导航标签

• 清晰的激活状态指示

• 无缝的边框连接

• 点击切换时的平滑过渡

• 响应式布局

可根据实际需求添加以下功能：

1. 路由集成（使用 vue-router）

2. 状态持久化（使用 localStorage）

3. 内容区数据加载

4. 加载状态指示

5. 数量角标提示（在标签后添加数字）