Tabs 标签页

标签页用于在同一区域切换多组平级内容。VISTA B 直接使用 Element Plus 的 el-tabs，样式沿用组件库，适合详情页分区、配置面板、数据看板和后台模块切换。

基础用法

用 el-tabs 包裹多个 el-tab-pane。通过 v-model 绑定当前激活标签，name 用来标识每个标签页。

项目基础信息、客户资料和交付节点。

户型、素材、风格和预算配置。

报价项、增减项和最终金额。

审批、修改和导出记录。

项目资料

方案配置

报价明细

操作记录

<script setup>
import { ref } from 'vue'

const activeName = ref('project')
</script>

<template>
  <el-tabs v-model="activeName">
    <el-tab-pane label="项目资料" name="project">项目基础信息</el-tab-pane>
    <el-tab-pane label="方案配置" name="plan">方案配置内容</el-tab-pane>
    <el-tab-pane label="报价明细" name="price">报价明细内容</el-tab-pane>
    <el-tab-pane label="操作记录" name="record">操作记录内容</el-tab-pane>
  </el-tabs>
</template>

卡片风格

设置 type="card" 后，标签会显示为卡片样式，适合模块边界更明确的内容区。

展示项目名称、客户信息、状态和负责人。

展示方案版本、户型配置和素材选择。

展示套餐、追加项和折扣信息。

项目资料

方案配置

报价明细

<el-tabs v-model="activeName" type="card">
  <el-tab-pane label="项目资料" name="project">项目资料</el-tab-pane>
  <el-tab-pane label="方案配置" name="plan">方案配置</el-tab-pane>
  <el-tab-pane label="报价明细" name="price">报价明细</el-tab-pane>
</el-tabs>

带边框的卡片风格

设置 type="border-card" 后，标签头和内容区会形成完整边框，适合独立面板或嵌入卡片中的分区。

汇总项目进度、预算和待处理事项。

管理设计师、销售和交付负责人。

配置项目权限、报价规则和导出模板。

概览

成员

设置

<el-tabs v-model="activeName" type="border-card">
  <el-tab-pane label="概览" name="overview">概览内容</el-tab-pane>
  <el-tab-pane label="成员" name="member">成员内容</el-tab-pane>
  <el-tab-pane label="设置" name="setting">设置内容</el-tab-pane>
</el-tabs>

标签位置

通过 tab-position 可以设置标签位置，支持 top、right、bottom、left。内容较多时，左侧标签更适合做详情页分区导航。

toprightbottomleft

客户、项目、户型、面积等基础信息。

设计方案、素材清单和预算范围。

渲染、导出和交付流程配置。

基础信息

方案内容

交付设置

<el-tabs tab-position="left">
  <el-tab-pane label="基础信息">基础信息内容</el-tab-pane>
  <el-tab-pane label="方案内容">方案内容</el-tab-pane>
  <el-tab-pane label="交付设置">交付设置内容</el-tab-pane>
</el-tabs>

自定义标签页

使用 label 插槽可以自定义标签标题，适合添加图标、数量或状态标记。

查看方案设计、渲染和交付排期。

审核报价、素材替换和客户确认记录。

查看已归档的项目和交付资料。

设计排期

待审核

已完成

<el-tabs v-model="activeName">
  <el-tab-pane name="design">
    <template #label>
      <span>
        <el-icon><Calendar /></el-icon>
        设计排期
      </span>
    </template>
    设计排期内容
  </el-tab-pane>
  <el-tab-pane label="待审核" name="review">待审核内容</el-tab-pane>
</el-tabs>

动态增减标签页

设置 editable 后，标签页可以新增和关闭。监听 edit 事件，根据 action 分别处理新增和删除。

维护项目基础信息、客户资料和合同附件。

配置户型、素材、预算和报价规则。

项目资料

方案配置

<script setup>
import { ref } from 'vue'

let tabIndex = 2
const editableTabsValue = ref('2')
const editableTabs = ref([
  { title: '项目资料', name: '1', content: '项目资料内容' },
  { title: '方案配置', name: '2', content: '方案配置内容' }
])

const handleTabsEdit = (targetName, action) => {
  if (action === 'add') {
    const newTabName = `${++tabIndex}`
    editableTabs.value.push({
      title: `新标签 ${newTabName}`,
      name: newTabName,
      content: `新标签 ${newTabName} 的内容`
    })
    editableTabsValue.value = newTabName
  }

  if (action === 'remove') {
    editableTabs.value = editableTabs.value.filter((tab) => tab.name !== targetName)
  }
}
</script>

<template>
  <el-tabs v-model="editableTabsValue" type="card" editable @edit="handleTabsEdit">
    <el-tab-pane
      v-for="item in editableTabs"
      :key="item.name"
      :label="item.title"
      :name="item.name"
    >
      {{ item.content }}
    </el-tab-pane>
  </el-tabs>
</template>

默认值

当没有使用 v-model 或初始值为空时，可以通过 default-value 指定默认激活的标签页。

基础资料内容。

默认展示权限配置。

操作日志内容。

基础资料

权限配置

操作日志

<el-tabs default-value="permission">
  <el-tab-pane label="基础资料" name="basic">基础资料内容</el-tab-pane>
  <el-tab-pane label="权限配置" name="permission">权限配置内容</el-tab-pane>
  <el-tab-pane label="操作日志" name="logs">操作日志内容</el-tab-pane>
</el-tabs>

API

Tabs 属性

属性	说明	类型	默认值
model-value / v-model	绑定值，选中选项卡的 name	string / number	空
default-value	初始值，未设置 model-value 时生效	string / number	空
type	风格类型	card / border-card / 空	空
closable	标签是否可关闭	boolean	false
addable	标签是否可增加	boolean	false
editable	标签是否同时可增加和关闭	boolean	false
tab-position	选项卡所在位置	top / right / bottom / left	top
before-leave	切换标签之前的钩子，返回 false 或 rejected Promise 时阻止切换	Function	() => true
stretch	标签宽度是否自动撑开	boolean	false
tabindex	Tabs 的 tabindex	string / number	0

Tabs 事件

事件名	说明	类型
tab-click	标签被选中时触发	(pane: TabsPaneContext, event: Event) => void
tab-change	激活标签改变时触发	(name: TabPaneName) => void
edit	点击新增或关闭按钮后触发	(paneName: TabPaneName | undefined, action: 'remove' | 'add') => void
tab-remove	点击标签关闭按钮后触发	(name: TabPaneName) => void
tab-add	点击新增按钮后触发	() => void

Tabs 插槽

插槽	说明	子标签
default	自定义默认内容	TabPane
add-icon	自定义新增按钮图标	空

Tabs 暴露

名称	说明	类型
currentName	当前激活标签页的名称	Ref<string | number>

TabPane 属性

属性	说明	类型	默认值
label	选项卡标题	string	''
name	与选项卡绑定值对应的标识符，未设置时默认为顺序值	string / number	空
closable	标签是否可关闭	boolean	空
disabled	是否禁用	boolean	false
lazy	标签内容是否延迟渲染	boolean	false

TabPane 插槽

插槽	说明
default	TabPane 的内容
label	TabPane 的标题内容