ProTabs 标签页

ProTabs 标签页 的基础用法、公开 API 与示例。

基础示例

示例使用本地演示数据；上传、校验和提交不会连接业务后端。

<script setup lang="ts">
import { ref, } from "vue";
import { ProTabs } from "@/components/pro/tabs";

const columns = [{ label: "基础信息", name: "base", el: "div", elProps: { innerText: "基础内容" } }, { label: "扩展信息", name: "more", el: "div", elProps: { innerText: "扩展内容" } }];
</script>

<template>
  <ClientOnly>
    <div class="demo-surface">
      <ProTabs :columns="columns" />
    </div>
  </ClientOnly>
</template>

隐藏源代码

引入方式

import { ProTabs } from "@/components/pro/tabs";

Props

参数	说明	类型	默认值	必填
columns	Tabs 列配置	TabColumn[]	[]	否
card	是否使用 card 样式	boolean	false	否

Events

事件名	说明	回调参数
-	该组件未声明 Events。	-

Slots

插槽名	说明	参数
动态插槽(prop(column))	动态转发当前组件收到的同名插槽。	-

Expose

名称	说明	类型
elTabsInstance	暴露 elTabsInstance 给外部调用。	-
getTabPaneInstances	暴露 getTabPaneInstances 给外部调用。	-
getTabPaneInstance	暴露 getTabPaneInstance 给外部调用。	-

Module API

名称	说明	类型
ProTabs	导出 ProTabs 供业务侧复用。	useInstall(index)

Types

ProTabsProps

导出 ProTabsProps 供业务侧复用。

字段	说明	类型	默认值	必填
columns	Tabs 列配置	TabColumn[]	-	否
card	是否使用 card 样式	boolean	false	否

TabColumn

导出 TabColumn 供业务侧复用。

字段	说明	类型	默认值	必填
prop	tab 唯一标识，等价于 ElTabPane 的 name	string	-	否
el	Tab 内容（组件）	RenderTypes	-	否
elProps	el 组件的 Props	MaybeRef<Recordable>	-	否
elSlots	el 组件的插槽	{<br> [slotName: string]: (data: Recordable) => RenderTypes;<br> }	-	否
destroy	是否销毁 ElTabPane，true 销毁，false 不销毁，类似于 v-if	MaybeRefOrGetter<boolean>	false	否
hidden	是否隐藏 ElTabPane，true 隐藏，false 不隐藏，类似于 v-show	MaybeRefOrGetter<boolean>	false	否
render	自定义 ElTabPane 内容渲染（支持 h、tsx 语法）	() => RenderTypes	-	否
renderLabel	自定义 ElTabPane 标题渲染（支持 h、tsx 语法）	() => RenderTypes	-	否

API 根据当前组件源码生成；同步版本与验证记录见维护说明。