修复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" :key="tabPage.id"
:id="tabPage.id" :id="tabPage.id"
:title="tabPage.title" :title="tabPage.title"
:panels="tabPage.panels"
> >
<!-- 在TabPage内渲染其包含的Panels --> <!-- 在TabPage内渲染其包含的Panels -->
<Panel <Panel

View File

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