Tabs 选项卡

avue-tabs 按 option.column 渲染标签栏，适合切换表单、表格或自定义内容。当前组件不提供内容面板，内容由业务在组件外按当前选项渲染。

切换与自定义标签

效果预览可直接操作下方示例

change 返回整个列配置对象。首次渲染默认选中下标 0，不会主动触发 change，因此示例将当前内容初始化为第一列。

正在加载示例…

<template>
  <avue-tabs ref="tabs" :option="option" @change="active = $event">
    <template #label="{ column, active: selected }">
      <span :style="{ fontWeight: selected ? 600 : 400 }">{{ column.label }}</span>
    </template>
  </avue-tabs>
  <el-alert :title="`${active.label}：${active.description}`" :closable="false" />
  <el-button class="tabs-demo-button" @click="tabs?.changeTabs(1)">通过实例切换到配置说明</el-button>
</template>

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

const tabs = ref(null)
const option = {
  column: [
    { label: '基础信息', prop: 'basic', description: '内容由组件外的当前列状态渲染。' },
    { label: '配置说明', prop: 'settings', description: 'change 回调返回当前列对象。' },
    { label: '暂不可用', prop: 'disabled', disabled: true, description: '' }
  ]
}
// 初次渲染不触发 change，因此主动初始化第一列。
const active = ref(option.column[0])
</script>

<style scoped>
.tabs-demo-button { margin-top: 12px; white-space: normal; height: auto; min-height: 32px; }
</style>

Props 与 Option

参数	说明	类型	默认值
option	必填的选项卡配置	object	{}
option.column	标签数组，每项的 prop 应唯一	array	[]
option.position	标签位置，透传给 Element Plus Tabs	string	Element Plus 默认值
option.type	标签样式，支持 card、border-card；不传为普通样式	string	—
column.prop	唯一标识，用于业务判断和渲染 key	string	—
column.label / icon	标签文字 / 图标	string	—
column.disabled	禁止用户切换到该标签	boolean	false

组件内部通过数组下标记录当前标签，不支持 v-model。动态调整 column 顺序后，请重新确定要激活的下标。

Events

事件	说明	参数
change	激活下标变化后触发；切换到相同下标不会重复触发	当前 column 对象

Methods

方法	参数	说明
changeTabs	index: number 或数字字符串	通过 ref 切换标签；传入有效且未禁用的列下标

Slots

名称	说明	参数
label	自定义每个标签的内容	{ column, index, active }，active 为当前标签是否激活