修复TabPage标签不显示问题:1. 修改TabPage组件使用panels属性渲染标签栏;2. 在DockLayout中传递panels属性给TabPage组件

This commit is contained in:
zqm
2025-11-05 10:53:37 +08:00
parent 9fee83f16d
commit 9e19db7911
2 changed files with 11 additions and 24 deletions

View File

@@ -27,6 +27,7 @@
:key="tabPage.id"
:id="tabPage.id"
:title="tabPage.title"
:panels="tabPage.panels"
>
<!-- 在TabPage内渲染其包含的Panels -->
<Panel

View File

@@ -1,34 +1,25 @@
<template>
<div class="tab-page">
<!-- 当tabs为空时不显示标签栏直接渲染slot内容 -->
<div v-if="tabs.length > 0" class="tab-header">
<!-- 使用panels数组渲染标签栏 -->
<div v-if="panels && panels.length > 0" class="tab-header">
<div
v-for="(tab, index) in tabs"
:key="tab.id"
v-for="(panel, index) in panels"
:key="panel.id"
:class="['tab-item', { 'active': activeTabIndex === index }]"
@click="setActiveTab(index)"
>
{{ tab.title }}
{{ panel.title }}
<span
v-if="tab.closable"
class="tab-close"
@click.stop="closeTab(tab.id)"
@click.stop="closeTab(panel.id)"
>×</span>
</div>
<div class="tab-placeholder"></div>
</div>
<!-- Tab页内容区域 -->
<div class="tab-content">
<!-- 当有tabs时渲染tabs内容 -->
<template v-if="tabs.length > 0">
<div v-for="(tab, index) in tabs" :key="tab.id" :class="['tab-panel', { 'active': activeTabIndex === index }]">
<component :is="tab.component" v-bind="tab.props"></component>
</div>
</template>
<!-- 当没有tabs或tabs为空时渲染slot内容 -->
<template v-else>
<!-- 渲染slot内容Panel组件 -->
<slot></slot>
</template>
</div>
</div>
</template>
@@ -39,15 +30,10 @@ import { defineProps, defineEmits, ref } from 'vue'
const props = defineProps({
id: { type: String, required: true },
title: { type: String, default: '标签页' },
// 可选的标签页数组配置
tabs: {
// 从父组件传入的面板数组
panels: {
type: Array,
default: () => []
},
// 默认激活的标签页索引
activeIndex: {
type: Number,
default: 0
}
})