From 9b8cd839ee1e05a8905f75cb08dc8dea2970004b Mon Sep 17 00:00:00 2001
From: wisonic-s <shaochuan.wu@fit2cloud.com>
Date: Thu, 9 Nov 2023 17:49:27 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E8=A1=A8=E6=A0=BC=E6=94=AF=E6=8C=81?=
 =?UTF-8?q?=E9=9A=90=E8=97=8F=E8=A1=A8=E5=A4=B4#5873?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 core/frontend/src/lang/en.js                  |   1 +
 core/frontend/src/lang/tw.js                  |   1 +
 core/frontend/src/lang/zh.js                  |   1 +
 core/frontend/src/views/chart/chart/chart.js  |   3 +-
 .../src/views/chart/chart/table/table-info.js |  18 ++
 core/frontend/src/views/chart/chart/util.js   |  12 +-
 .../components/shapeAttr/SizeSelector.vue     | 198 +++++++------
 .../components/shapeAttr/SizeSelectorAntV.vue | 275 ++++++++++--------
 .../chart/components/table/TableNormal.vue    |   9 +-
 9 files changed, 295 insertions(+), 223 deletions(-)

diff --git a/core/frontend/src/lang/en.js b/core/frontend/src/lang/en.js
index 609f7da0ab..fcbad70544 100644
--- a/core/frontend/src/lang/en.js
+++ b/core/frontend/src/lang/en.js
@@ -1147,6 +1147,7 @@ export default {
     table_header_font_color: 'Header Font',
     table_item_font_color: 'Table Font',
     table_show_index: 'Show Index',
+    table_show_table_header: 'Show Table Header',
     stripe: 'Zebra pattern',
     start_angle: 'Start Angle',
     end_angle: 'End Angle',
diff --git a/core/frontend/src/lang/tw.js b/core/frontend/src/lang/tw.js
index 454ab31525..fb6656ba65 100644
--- a/core/frontend/src/lang/tw.js
+++ b/core/frontend/src/lang/tw.js
@@ -1146,6 +1146,7 @@ export default {
     table_header_font_color: '表頭字體',
     table_item_font_color: '表格字體',
     table_show_index: '顯示序號',
+    table_show_table_header: '顯示表頭',
     stripe: '斑馬紋',
     start_angle: '起始角度',
     end_angle: '結束角度',
diff --git a/core/frontend/src/lang/zh.js b/core/frontend/src/lang/zh.js
index f27c6fa2a4..3175cc9525 100644
--- a/core/frontend/src/lang/zh.js
+++ b/core/frontend/src/lang/zh.js
@@ -1145,6 +1145,7 @@ export default {
     table_header_font_color: '表头字体',
     table_item_font_color: '表格字体',
     table_show_index: '显示序号',
+    table_show_table_header: '显示表头',
     stripe: '斑马纹',
     start_angle: '起始角度',
     end_angle: '结束角度',
diff --git a/core/frontend/src/views/chart/chart/chart.js b/core/frontend/src/views/chart/chart/chart.js
index a687a7aafe..2058b8a829 100644
--- a/core/frontend/src/views/chart/chart/chart.js
+++ b/core/frontend/src/views/chart/chart/chart.js
@@ -156,7 +156,8 @@ export const DEFAULT_SIZE = {
   mapLineAnimateInterval: 1,
   mapLineAnimateTrailLength: 1,
   wordSizeRange: [8, 32],
-  wordSpacing: 6
+  wordSpacing: 6,
+  showTableHeader: true
 }
 export const DEFAULT_SUSPENSION = {
   show: true
diff --git a/core/frontend/src/views/chart/chart/table/table-info.js b/core/frontend/src/views/chart/chart/table/table-info.js
index 8f7179089f..2c9b8edd21 100644
--- a/core/frontend/src/views/chart/chart/table/table-info.js
+++ b/core/frontend/src/views/chart/chart/table/table-info.js
@@ -111,6 +111,15 @@ export function baseTableInfo(s2, container, chart, action, tableData, pageInfo)
       return new DataCell(viewMeta, viewMeta?.spreadsheet)
     }
   }
+  // 隐藏表头，保留顶部的分割线, 禁用表头横向 resize
+  if (customAttr.size.showTableHeader === false) {
+    s2Options.style.colCfg.height = 1
+    s2Options.interaction = {
+      resize: {
+        colCellVertical: false
+      }
+    }
+  }
 
   // 开始渲染
   if (s2) {
@@ -284,6 +293,15 @@ export function baseTableNormal(s2, container, chart, action, tableData) {
       }
     }
   }
+  // 隐藏表头，保留顶部的分割线, 禁用表头横向 resize
+  if (customAttr.size.showTableHeader === false) {
+    s2Options.style.colCfg.height = 1
+    s2Options.interaction = {
+      resize: {
+        colCellVertical: false
+      }
+    }
+  }
 
   // 开始渲染
   if (s2) {
diff --git a/core/frontend/src/views/chart/chart/util.js b/core/frontend/src/views/chart/chart/util.js
index 92a9757112..347dbd41c2 100644
--- a/core/frontend/src/views/chart/chart/util.js
+++ b/core/frontend/src/views/chart/chart/util.js
@@ -63,7 +63,8 @@ export const TYPE_CONFIGS = [
         'tableColumnMode',
         'showIndex',
         'indexLabel',
-        'tableColTooltip'
+        'tableColTooltip',
+        'showTableHeader'
       ],
       'title-selector-ant-v': [
         'show',
@@ -113,7 +114,8 @@ export const TYPE_CONFIGS = [
         'tableColumnMode',
         'showIndex',
         'indexLabel',
-        'tableColTooltip'
+        'tableColTooltip',
+        'showTableHeader'
       ],
       'title-selector-ant-v': [
         'show',
@@ -1987,7 +1989,8 @@ export const TYPE_CONFIGS = [
         'tableColumnWidth',
         'showIndex',
         'indexLabel',
-        'tableAutoBreakLine'
+        'tableAutoBreakLine',
+        'showTableHeader'
       ],
       'title-selector': [
         'show',
@@ -2031,7 +2034,8 @@ export const TYPE_CONFIGS = [
         'tableColumnWidth',
         'showIndex',
         'indexLabel',
-        'tableAutoBreakLine'
+        'tableAutoBreakLine',
+        'showTableHeader'
       ],
       'title-selector': [
         'show',
diff --git a/core/frontend/src/views/chart/components/shapeAttr/SizeSelector.vue b/core/frontend/src/views/chart/components/shapeAttr/SizeSelector.vue
index bfaa06d0ec..ca4a384770 100644
--- a/core/frontend/src/views/chart/components/shapeAttr/SizeSelector.vue
+++ b/core/frontend/src/views/chart/components/shapeAttr/SizeSelector.vue
@@ -242,7 +242,42 @@
         </el-form-item>
         <!--radar-end-->
         <!--table-begin-->
-
+        <el-form-item
+          v-show="showProperty('tableItemFontSize')"
+          label-width="100px"
+          :label="$t('chart.table_item_fontsize')"
+          class="form-item"
+        >
+          <el-select
+            v-model="sizeForm.tableItemFontSize"
+            :placeholder="$t('chart.table_item_fontsize')"
+            @change="changeBarSizeCase('tableItemFontSize')"
+          >
+            <el-option
+              v-for="option in fontSize"
+              :key="option.value"
+              :label="option.name"
+              :value="option.value"
+            />
+          </el-select>
+        </el-form-item>
+        <el-form-item
+          v-show="showProperty('tableItemHeight')"
+          label-width="100px"
+          :label="$t('chart.table_item_height')"
+          class="form-item form-item-slider"
+        >
+          <el-slider
+            v-model="sizeForm.tableItemHeight"
+            :disabled="sizeForm.tableAutoBreakLine"
+            :min="36"
+            :max="100"
+            show-input
+            :show-input-controls="false"
+            input-size="mini"
+            @change="changeBarSizeCase('tableItemHeight')"
+          />
+        </el-form-item>
         <el-form-item
           v-show="showProperty('tablePageMode')"
           label-width="100px"
@@ -283,6 +318,22 @@
             />
           </el-select>
         </el-form-item>
+        <el-form-item
+          v-show="showProperty('tableColumnWidth')"
+          label-width="100px"
+          :label="$t('chart.table_column_width_config')"
+          class="form-item form-item-slider"
+        >
+          <el-slider
+            v-model="sizeForm.tableColumnWidth"
+            :min="10"
+            :max="1000"
+            show-input
+            :show-input-controls="false"
+            input-size="mini"
+            @change="changeBarSizeCase('tableColumnWidth')"
+          />
+        </el-form-item>
         <el-form-item
           v-show="showProperty('tableAutoBreakLine')"
           label-width="100px"
@@ -303,97 +354,10 @@
             </div>
             <i
               class="el-icon-info"
-              style="cursor: pointer;color: gray;font-size: 12px;"
+              style="cursor: pointer;color: grey;font-size: 12px;"
             />
           </el-tooltip>
         </el-form-item>
-        <el-form-item
-          v-show="showProperty('tableTitleFontSize')"
-          label-width="100px"
-          :label="$t('chart.table_title_fontsize')"
-          class="form-item"
-        >
-          <el-select
-            v-model="sizeForm.tableTitleFontSize"
-            :placeholder="$t('chart.table_title_fontsize')"
-            @change="changeBarSizeCase('tableTitleFontSize')"
-          >
-            <el-option
-              v-for="option in fontSize"
-              :key="option.value"
-              :label="option.name"
-              :value="option.value"
-            />
-          </el-select>
-        </el-form-item>
-        <el-form-item
-          v-show="showProperty('tableItemFontSize')"
-          label-width="100px"
-          :label="$t('chart.table_item_fontsize')"
-          class="form-item"
-        >
-          <el-select
-            v-model="sizeForm.tableItemFontSize"
-            :placeholder="$t('chart.table_item_fontsize')"
-            @change="changeBarSizeCase('tableItemFontSize')"
-          >
-            <el-option
-              v-for="option in fontSize"
-              :key="option.value"
-              :label="option.name"
-              :value="option.value"
-            />
-          </el-select>
-        </el-form-item>
-        <el-form-item
-          v-show="showProperty('tableTitleHeight')"
-          label-width="100px"
-          :label="$t('chart.table_title_height')"
-          class="form-item form-item-slider"
-        >
-          <el-slider
-            v-model="sizeForm.tableTitleHeight"
-            :min="36"
-            :max="100"
-            show-input
-            :show-input-controls="false"
-            input-size="mini"
-            @change="changeBarSizeCase('tableTitleHeight')"
-          />
-        </el-form-item>
-        <el-form-item
-          v-show="showProperty('tableItemHeight')"
-          label-width="100px"
-          :label="$t('chart.table_item_height')"
-          class="form-item form-item-slider"
-        >
-          <el-slider
-            v-model="sizeForm.tableItemHeight"
-            :disabled="sizeForm.tableAutoBreakLine"
-            :min="36"
-            :max="100"
-            show-input
-            :show-input-controls="false"
-            input-size="mini"
-            @change="changeBarSizeCase('tableItemHeight')"
-          />
-        </el-form-item>
-        <el-form-item
-          v-show="showProperty('tableColumnWidth')"
-          label-width="100px"
-          :label="$t('chart.table_column_width_config')"
-          class="form-item form-item-slider"
-        >
-          <el-slider
-            v-model="sizeForm.tableColumnWidth"
-            :min="10"
-            :max="1000"
-            show-input
-            :show-input-controls="false"
-            input-size="mini"
-            @change="changeBarSizeCase('tableColumnWidth')"
-          />
-        </el-form-item>
         <el-form-item
           v-show="showProperty('showIndex')"
           label-width="100px"
@@ -421,6 +385,59 @@
             @blur="changeBarSizeCase('indexLabel')"
           />
         </el-form-item>
+        <el-divider v-show="includesAny(chart.type ,'table')" />
+        <el-form-item
+          v-show="showProperty('showTableHeader')"
+          label-width="100px"
+          :label="$t('chart.table_show_table_header')"
+          class="form-item"
+        >
+          <el-radio-group
+            v-model="sizeForm.showTableHeader"
+            @change="changeBarSizeCase('showTableHeader')"
+          >
+            <el-radio :label="true">{{ $t('commons.yes') }}</el-radio>
+            <el-radio :label="false">{{ $t('commons.no') }}</el-radio>
+          </el-radio-group>
+        </el-form-item>
+        <div v-show="showProperty('showTableHeader') && sizeForm.showTableHeader">
+          <el-form-item
+            v-show="showProperty('tableTitleFontSize')"
+            label-width="100px"
+            :label="$t('chart.table_title_fontsize')"
+            class="form-item"
+          >
+            <el-select
+              v-model="sizeForm.tableTitleFontSize"
+              :placeholder="$t('chart.table_title_fontsize')"
+              @change="changeBarSizeCase('tableTitleFontSize')"
+            >
+              <el-option
+                v-for="option in fontSize"
+                :key="option.value"
+                :label="option.name"
+                :value="option.value"
+              />
+            </el-select>
+          </el-form-item>
+
+          <el-form-item
+            v-show="showProperty('tableTitleHeight')"
+            label-width="100px"
+            :label="$t('chart.table_title_height')"
+            class="form-item form-item-slider"
+          >
+            <el-slider
+              v-model="sizeForm.tableTitleHeight"
+              :min="36"
+              :max="100"
+              show-input
+              :show-input-controls="false"
+              input-size="mini"
+              @change="changeBarSizeCase('tableTitleHeight')"
+            />
+          </el-form-item>
+        </div>
 
         <!--table-end-->
         <!--gauge-begin-->
@@ -1055,6 +1072,7 @@
 
 <script>
 import { CHART_FONT_FAMILY, CHART_FONT_LETTER_SPACE, DEFAULT_SIZE } from '../../chart/chart'
+import { includesAny } from '@/utils/StringUtils'
 export default {
   name: 'SizeSelector',
   props: {
@@ -1118,6 +1136,7 @@ export default {
     this.initData()
   },
   methods: {
+    includesAny,
     initData() {
       const chart = JSON.parse(JSON.stringify(this.chart))
       if (chart.customAttr) {
@@ -1145,6 +1164,7 @@ export default {
           this.sizeForm.tablePageSize = this.sizeForm.tablePageSize ? this.sizeForm.tablePageSize : DEFAULT_SIZE.tablePageSize
 
           this.sizeForm.showIndex = this.sizeForm.showIndex ? this.sizeForm.showIndex : DEFAULT_SIZE.showIndex
+          this.sizeForm.showTableHeader = this.sizeForm.showTableHeader !== false
           if (this.sizeForm.indexLabel === null || this.sizeForm.indexLabel === undefined) {
             this.sizeForm.indexLabel = DEFAULT_SIZE.indexLabel
           }
diff --git a/core/frontend/src/views/chart/components/shapeAttr/SizeSelectorAntV.vue b/core/frontend/src/views/chart/components/shapeAttr/SizeSelectorAntV.vue
index 86ff082cfb..0b4bf1aee2 100644
--- a/core/frontend/src/views/chart/components/shapeAttr/SizeSelectorAntV.vue
+++ b/core/frontend/src/views/chart/components/shapeAttr/SizeSelectorAntV.vue
@@ -162,7 +162,60 @@
         </el-form-item>
         <!--radar-end-->
         <!--table-begin-->
-
+        <el-form-item
+          v-show="showProperty('tableItemFontSize')"
+          label-width="100px"
+          :label="$t('chart.table_item_fontsize')"
+          class="form-item"
+        >
+          <el-select
+            v-model="sizeForm.tableItemFontSize"
+            :placeholder="$t('chart.table_item_fontsize')"
+            @change="changeBarSizeCase('tableItemFontSize')"
+          >
+            <el-option
+              v-for="option in fontSize"
+              :key="option.value"
+              :label="option.name"
+              :value="option.value"
+            />
+          </el-select>
+        </el-form-item>
+        <el-form-item
+          v-show="showProperty('tableItemAlign')"
+          label-width="100px"
+          :label="$t('chart.table_item_align')"
+          class="form-item"
+        >
+          <el-select
+            v-model="sizeForm.tableItemAlign"
+            :placeholder="$t('chart.table_item_align')"
+            @change="changeBarSizeCase('tableItemAlign')"
+          >
+            <el-option
+              v-for="option in alignOptions"
+              :key="option.value"
+              :label="option.name"
+              :value="option.value"
+            />
+          </el-select>
+        </el-form-item>
+        <el-form-item
+          v-show="showProperty('tableItemHeight')"
+          label-width="100px"
+          :label="$t('chart.table_item_height')"
+          class="form-item form-item-slider"
+        >
+          <el-slider
+            v-model="sizeForm.tableItemHeight"
+            :min="20"
+            :max="100"
+            show-input
+            :show-input-controls="false"
+            input-size="mini"
+            @change="changeBarSizeCase('tableItemHeight')"
+          />
+        </el-form-item>
         <el-form-item
           v-show="showProperty('tablePageMode')"
           label-width="100px"
@@ -203,114 +256,6 @@
             />
           </el-select>
         </el-form-item>
-        <el-form-item
-          v-show="showProperty('tableTitleFontSize')"
-          label-width="100px"
-          :label="$t('chart.table_title_fontsize')"
-          class="form-item"
-        >
-          <el-select
-            v-model="sizeForm.tableTitleFontSize"
-            :placeholder="$t('chart.table_title_fontsize')"
-            @change="changeBarSizeCase('tableTitleFontSize')"
-          >
-            <el-option
-              v-for="option in fontSize"
-              :key="option.value"
-              :label="option.name"
-              :value="option.value"
-            />
-          </el-select>
-        </el-form-item>
-        <el-form-item
-          v-show="showProperty('tableItemFontSize')"
-          label-width="100px"
-          :label="$t('chart.table_item_fontsize')"
-          class="form-item"
-        >
-          <el-select
-            v-model="sizeForm.tableItemFontSize"
-            :placeholder="$t('chart.table_item_fontsize')"
-            @change="changeBarSizeCase('tableItemFontSize')"
-          >
-            <el-option
-              v-for="option in fontSize"
-              :key="option.value"
-              :label="option.name"
-              :value="option.value"
-            />
-          </el-select>
-        </el-form-item>
-        <el-form-item
-          v-show="showProperty('tableHeaderAlign')"
-          label-width="100px"
-          :label="$t('chart.table_header_align')"
-          class="form-item"
-        >
-          <el-select
-            v-model="sizeForm.tableHeaderAlign"
-            :placeholder="$t('chart.table_header_align')"
-            @change="changeBarSizeCase('tableHeaderAlign')"
-          >
-            <el-option
-              v-for="option in alignOptions"
-              :key="option.value"
-              :label="option.name"
-              :value="option.value"
-            />
-          </el-select>
-        </el-form-item>
-        <el-form-item
-          v-show="showProperty('tableItemAlign')"
-          label-width="100px"
-          :label="$t('chart.table_item_align')"
-          class="form-item"
-        >
-          <el-select
-            v-model="sizeForm.tableItemAlign"
-            :placeholder="$t('chart.table_item_align')"
-            @change="changeBarSizeCase('tableItemAlign')"
-          >
-            <el-option
-              v-for="option in alignOptions"
-              :key="option.value"
-              :label="option.name"
-              :value="option.value"
-            />
-          </el-select>
-        </el-form-item>
-        <el-form-item
-          v-show="showProperty('tableTitleHeight')"
-          label-width="100px"
-          :label="$t('chart.table_title_height')"
-          class="form-item form-item-slider"
-        >
-          <el-slider
-            v-model="sizeForm.tableTitleHeight"
-            :min="20"
-            :max="100"
-            show-input
-            :show-input-controls="false"
-            input-size="mini"
-            @change="changeBarSizeCase('tableTitleHeight')"
-          />
-        </el-form-item>
-        <el-form-item
-          v-show="showProperty('tableItemHeight')"
-          label-width="100px"
-          :label="$t('chart.table_item_height')"
-          class="form-item form-item-slider"
-        >
-          <el-slider
-            v-model="sizeForm.tableItemHeight"
-            :min="20"
-            :max="100"
-            show-input
-            :show-input-controls="false"
-            input-size="mini"
-            @change="changeBarSizeCase('tableItemHeight')"
-          />
-        </el-form-item>
         <el-form-item
           v-show="showProperty('tableColumnMode')"
           label-width="100px"
@@ -384,29 +329,100 @@
             @blur="changeBarSizeCase('indexLabel')"
           />
         </el-form-item>
+        <el-divider v-show="equalsAny(chart.type, 'table-info', 'table-normal')" />
         <el-form-item
-          v-show="showProperty('tableRowTooltip')"
+          v-show="showProperty('showTableHeader')"
           label-width="100px"
-          :label="$t('chart.table_row_tooltip')"
+          :label="$t('chart.table_show_table_header')"
           class="form-item"
         >
-          <el-checkbox
-            v-model="sizeForm.tableRowTooltip.show"
-            @change="changeBarSizeCase('tableRowTooltip')"
-          />
+          <el-radio-group
+            v-model="sizeForm.showTableHeader"
+            @change="changeBarSizeCase('showTableHeader')"
+          >
+            <el-radio :label="true">{{ $t('commons.yes') }}</el-radio>
+            <el-radio :label="false">{{ $t('commons.no') }}</el-radio>
+          </el-radio-group>
         </el-form-item>
-        <el-form-item
-          v-show="showProperty('tableColTooltip')"
-          label-width="100px"
-          :label="$t('chart.table_col_tooltip')"
-          class="form-item"
-        >
-          <el-checkbox
-            v-model="sizeForm.tableColTooltip.show"
-            @change="changeBarSizeCase('tableColTooltip')"
-          />
-        </el-form-item>
-
+        <div v-show="showProperty('showTableHeader') && sizeForm.showTableHeader">
+          <el-form-item
+            v-show="showProperty('tableTitleFontSize')"
+            label-width="100px"
+            :label="$t('chart.table_title_fontsize')"
+            class="form-item"
+          >
+            <el-select
+              v-model="sizeForm.tableTitleFontSize"
+              :placeholder="$t('chart.table_title_fontsize')"
+              @change="changeBarSizeCase('tableTitleFontSize')"
+            >
+              <el-option
+                v-for="option in fontSize"
+                :key="option.value"
+                :label="option.name"
+                :value="option.value"
+              />
+            </el-select>
+          </el-form-item>
+          <el-form-item
+            v-show="showProperty('tableHeaderAlign')"
+            label-width="100px"
+            :label="$t('chart.table_header_align')"
+            class="form-item"
+          >
+            <el-select
+              v-model="sizeForm.tableHeaderAlign"
+              :placeholder="$t('chart.table_header_align')"
+              @change="changeBarSizeCase('tableHeaderAlign')"
+            >
+              <el-option
+                v-for="option in alignOptions"
+                :key="option.value"
+                :label="option.name"
+                :value="option.value"
+              />
+            </el-select>
+          </el-form-item>
+          <el-form-item
+            v-show="showProperty('tableTitleHeight')"
+            label-width="100px"
+            :label="$t('chart.table_title_height')"
+            class="form-item form-item-slider"
+          >
+            <el-slider
+              v-model="sizeForm.tableTitleHeight"
+              :min="20"
+              :max="100"
+              show-input
+              :show-input-controls="false"
+              input-size="mini"
+              @change="changeBarSizeCase('tableTitleHeight')"
+            />
+          </el-form-item>
+          <el-form-item
+            v-show="showProperty('tableRowTooltip')"
+            label-width="100px"
+            :label="$t('chart.table_row_tooltip')"
+            class="form-item"
+          >
+            <el-checkbox
+              v-model="sizeForm.tableRowTooltip.show"
+              @change="changeBarSizeCase('tableRowTooltip')"
+            />
+          </el-form-item>
+          <el-form-item
+            v-show="showProperty('tableColTooltip')"
+            label-width="100px"
+            :label="$t('chart.table_col_tooltip')"
+            class="form-item"
+          >
+            <el-checkbox
+              v-model="sizeForm.tableColTooltip.show"
+              @change="changeBarSizeCase('tableColTooltip')"
+            />
+          </el-form-item>
+        </div>
+        <!--table-end-->
         <!--chart-mix-start-->
         <span v-show="showProperty('mix')">
           <el-divider
@@ -1427,7 +1443,7 @@
 
 <script>
 import { CHART_FONT_FAMILY, CHART_FONT_LETTER_SPACE, DEFAULT_SIZE } from '../../chart/chart'
-import { equalsAny } from '@/utils/StringUtils'
+import { equalsAny, includesAny } from '@/utils/StringUtils'
 import { mapState } from 'vuex'
 
 export default {
@@ -1537,6 +1553,8 @@ export default {
     this.initData()
   },
   methods: {
+    equalsAny,
+    includesAny,
     initField() {
       this.quotaData = this.quotaFields.filter(ele => !ele.chartId && ele.id !== 'count')
       if (this.sizeForm.gaugeMinField.id) {
@@ -1590,6 +1608,7 @@ export default {
           this.sizeForm.tableColTooltip = this.sizeForm.tableColTooltip ?? DEFAULT_SIZE.tableColTooltip
 
           this.sizeForm.showIndex = this.sizeForm.showIndex ? this.sizeForm.showIndex : DEFAULT_SIZE.showIndex
+          this.sizeForm.showTableHeader = this.sizeForm.showTableHeader !== false
           if (this.sizeForm.indexLabel === null || this.sizeForm.indexLabel === undefined) {
             this.sizeForm.indexLabel = DEFAULT_SIZE.indexLabel
           }
diff --git a/core/frontend/src/views/chart/components/table/TableNormal.vue b/core/frontend/src/views/chart/components/table/TableNormal.vue
index 3b10d9977f..e51eaa59f8 100644
--- a/core/frontend/src/views/chart/components/table/TableNormal.vue
+++ b/core/frontend/src/views/chart/components/table/TableNormal.vue
@@ -23,18 +23,19 @@
       <ux-grid
         ref="plxTable"
         size="mini"
+        class="table-class"
         :style="tableStyle"
         :height="height"
         :checkbox-config="{highlight: true}"
         :width-resize="true"
         :header-row-style="table_header_class"
         :row-style="getRowStyle"
-        class="table-class"
         :class="chart.id"
         :merge-cells="mergeCells"
         :show-summary="showSummary"
         :summary-method="summaryMethod"
         :index-config="{seqMethod}"
+        :show-header="showHeader"
         @cell-click="cellClick"
       >
         <ux-table-column
@@ -194,6 +195,7 @@ export default {
       scrollTop: 0,
       showIndex: false,
       indexLabel: '序号',
+      showHeader: true,
       scrollBarColor: DEFAULT_COLOR_CASE.tableScrollBarColor,
       scrollBarHoverColor: DEFAULT_COLOR_CASE.tableScrollBarHoverColor,
       totalStyle: {
@@ -451,6 +453,11 @@ export default {
           } else {
             this.indexLabel = customAttr.size.indexLabel
           }
+          if (customAttr.size.showTableHeader === false) {
+            this.showHeader = false
+          } else {
+            this.showHeader = true
+          }
 
           const autoBreakLine = customAttr.size.tableAutoBreakLine ? customAttr.size.tableAutoBreakLine : DEFAULT_SIZE.tableAutoBreakLine
           if (autoBreakLine) {