ProTabs 超级标签页

基础使用

传入 columns 即可快速构建一个标签页。

columns 每一项的 prop 等于 ElTabPane 的 name 属性，因此也可以传入 name 属性，两者都存在时 prop 优先级更高。

我是一个单独的 Vue 组件

group.vue 内容：

vue

<script setup lang="ts">
defineProps<{ userId: string }>();
</script>

<template>我是一个单独的 Vue 组件</template>

组件传参

通过 elProps 传入组件的参数。

如果传入响应式参数，则需要使用 computed 函数包起来。

我是一个单独的 Vue 组件，我接收的参数是 k100338

group.vue 内容：

vue

<script setup lang="ts">
defineProps<{ userId: string }>();
</script>

<template>我是一个单独的 Vue 组件，我接收的参数是 {{ userId }}</template>

Render 渲染

Teek 推荐使用 el 来引入外部组件进行渲染，让组件内代码量大大减少，更易维护，更易扩展。

当然，也可以使用 render 函数进行内容渲染，renderLabel 函数进行标签页的标题渲染，看本次 Demo。

除此之外，也可以使用插槽渲染，Teek 根据配置项的 prop 生成对应的内容插槽，根据 {prop}-label 生成对应的标题插槽。

我是一个用 Render（TSX）渲染页面

使用 ElTabs Prop

传入 ProTabs 的 props 都会透传给 ElTabs 组件。

columns 的每一项作为 props 透传给 ElTabPane 组件。

toprightbottomleft

群组页面

TabColumn

Tabs 列配置项，每一项都是一个 ElTabPane 组件。

属性名	说明	类型	默认值
prop	tab 唯一标识，等价于 elTabPane 的 name	`string`	—
el	Tab 内容（传入外部组件）	`object`	—
elProps	el 组件的 Props	`object` / `function`	—
elSlots	el 组件的插槽	`object`	—
destroy	是否销毁 ElTabPane，true 销毁，false 不销毁，类似于 v-if	`boolean`	false
hidden	是否隐藏 ElTabPane，true 隐藏，false 不隐藏，类似于 v-show	`boolean`	false
render	自定义 ElTabPane 内容渲染（支持 h、tsx 语法）	`function`	—
renderLabel	自定义 ElTabPane 标题渲染（支持 h、tsx 语法）	`function`	—
...	其他扩展属性，支持所有 ElTabPane Attributes	...	...

Attributes

属性名	说明	类型	默认值
columns	Tabs 列配置项	`array`	[]
card	是否使用 card 样式	`boolean`	false
...	其他扩展属性，支持所有 ElTabs Attributes	...	...

Slots

插槽名	说明	作用域插槽参数
'prop'	自定义标签页内容，自动根据配置项的 `prop` 生成对应的插槽	—
'prop'-label	自定义标签页 `label`，自动根据配置项的 `prop` 生成对应的插槽	—

Exposes

名称	说明	类型
elTabsInstance	`ElTabs` 实例	`object`
getTabPaneInstances	获取 `ElTabPane` 所有实例	`function`
getTabPaneInstance	传入 `prop` 获取对应的 `ElTabPane` 组件实例	`function`

ProTabs 超级标签页 ​

基础使用 ​

组件传参 ​

Render 渲染 ​

使用 ElTabs Prop ​

TabColumn ​

Attributes ​

Slots ​

Exposes ​