修改样式使得table显示正常

src/components/markdown/plugins/impl/VueStructData.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { nextTick, onMounted, ref, watch } from 'vue'
+import { computed, nextTick, onMounted, ref, watch } from 'vue'
 import { ElMessage } from 'element-plus'
 import { DataLine, Download, Grid, TrendCharts } from '@element-plus/icons-vue'
 import assist from '/@/api/assist'
@@ -41,8 +41,7 @@ const exportToCSV = () => {
 			return data.value!.fields.map((field) => `"${rowJson[field]}"`).join(',')
 		})
 
-		// 添加BOM以支持Excel正确显示中文
-		const csvContent = '\uFEFF' + [headers, ...rows].join('\n')
+		const csvContent = [headers, ...rows].join('\n')
 
 		download(csvContent, 'export.csv', 'text/csv,charset=utf-8;')
 
@@ -218,13 +217,21 @@ watch(display, async (newVal) => {
 	// 通知图表组件重新计算大小
 	chart.value?.resize()
 })
+
+const cardHeaderRef = ref<HTMLElement | null>(null)
+
+const cardBodyStyle = computed(()=> {
+	return {
+		height: `calc(100% - ${cardHeaderRef.value?.offsetHeight}px - 24px)`
+	}
+})
 </script>
 
 <template>
 	<div class="struct-data-container">
-		<el-card v-loading="loadingStruct" shadow="none" :body-style="{ padding: 0, margin: 0 }">
+		<el-card v-loading="loadingStruct" shadow="none" :body-style="{ padding: 0, margin: 0, height: '100%' }" style="height: 100%">
 			<template #header>
-				<div class="card-header">
+				<div class="card-header" ref="cardHeaderRef">
 					<span>结构化数据{{ display === 'table' ? '表格' : display === 'bar' ? '柱状图' : '折线图' }}</span>
 					<div class="header-controls">
 						<!-- 显示模式切换按钮组 -->
@@ -276,22 +283,17 @@ watch(display, async (newVal) => {
 				</div>
 			</template>
 			<!-- 内容区域 -->
-			<div v-if="data && data.fields && data.data">
-				<!-- 表格视图 -->
-				<div v-if="display === 'table'" class="table-wrapper">
-					<el-table :data="data.data" stripe border size="small" max-height="400">
-						<el-table-column v-for="field in data.fields" :key="field" :prop="field" :label="field" align="center" min-width="120">
-							<template #default="{ row }">
-								<span>{{ row[field] || '-' }}</span>
-							</template>
-						</el-table-column>
-					</el-table>
-				</div>
-
+			<div v-if="data && data.fields && data.data" :style="cardBodyStyle">
+				<el-table v-if="display === 'table'" :data="data.data" stripe border size="small" style="height: 100%">
+					<el-table-column v-for="field in data.fields" :key="field" :prop="field" :label="field" align="center" min-width="120">
+						<template #default="{ row }">
+							<span>{{ row[field] || '-' }}</span>
+						</template>
+					</el-table-column>
+				</el-table>
+<!---->
 				<!-- 图表视图 -->
-				<div v-else class="chart-wrapper">
-					<VueCharts ref="chart" :data="chartOptions" v-if="chartOptions" />
-				</div>
+				<VueCharts ref="chart" :data="chartOptions" v-else-if="chartOptions" style="height: 100%" />
 			</div>
 
 			<!-- 空数据状态 -->
@@ -304,6 +306,7 @@ watch(display, async (newVal) => {
 
 <style scoped lang="scss">
 .struct-data-container {
+	height: calc(100% - 32px);
 	margin: 16px 0;
 
 	.card-header {
@@ -346,18 +349,14 @@ watch(display, async (newVal) => {
 	}
 
 	.table-wrapper {
-		.el-table {
-			overflow: hidden;
-		}
+		height: 100%;
 	}
 
 	.chart-wrapper {
 		padding: 20px;
-		min-height: 400px;
 
 		:deep(div) {
 			width: 100% !important;
-			height: 400px !important;
 		}
 	}