diff --git a/frontend/src/components/canvas/custom-component/UserView.vue b/frontend/src/components/canvas/custom-component/UserView.vue
index d79f42924b..3fc2d9ae67 100644
--- a/frontend/src/components/canvas/custom-component/UserView.vue
+++ b/frontend/src/components/canvas/custom-component/UserView.vue
@@ -68,6 +68,7 @@ export default {
         title: '',
         customAttr: JSON.stringify({
           color: DEFAULT_COLOR_CASE,
+          tableColor: DEFAULT_COLOR_CASE,
           size: DEFAULT_SIZE,
           label: DEFAULT_LABEL,
           tooltip: DEFAULT_TOOLTIP
@@ -148,7 +149,11 @@ export default {
         // 组件样式-背景设置
         customStyleChart.background = customStylePanel.background
         // 图形属性-颜色设置
-        customAttrChart.color = customAttrPanel.color
+        if (this.chart.type.includes('table')) {
+          customAttrChart.color = customAttrPanel.tableColor
+        } else {
+          customAttrChart.color = customAttrPanel.color
+        }
 
         this.chart = {
           ...this.chart,
diff --git a/frontend/src/views/chart/group/Group.vue b/frontend/src/views/chart/group/Group.vue
index 8b40cd5608..633aad4e0f 100644
--- a/frontend/src/views/chart/group/Group.vue
+++ b/frontend/src/views/chart/group/Group.vue
@@ -578,6 +578,7 @@ export default {
       view.type = 'bar'
       view.customAttr = JSON.stringify({
         color: DEFAULT_COLOR_CASE,
+        tableColor: DEFAULT_COLOR_CASE,
         size: DEFAULT_SIZE,
         label: DEFAULT_LABEL,
         tooltip: DEFAULT_TOOLTIP
diff --git a/frontend/src/views/panel/SubjectSetting/PreSubject/SubjectTemplateItem.vue b/frontend/src/views/panel/SubjectSetting/PreSubject/SubjectTemplateItem.vue
index 82cced7596..3e8446c375 100644
--- a/frontend/src/views/panel/SubjectSetting/PreSubject/SubjectTemplateItem.vue
+++ b/frontend/src/views/panel/SubjectSetting/PreSubject/SubjectTemplateItem.vue
@@ -57,6 +57,7 @@
 <script>
 import { chartTransStr2Object } from '@/views/panel/panel'
 import { mapState } from 'vuex'
+import bus from '@/utils/bus'
 
 export default {
   name: 'StyleTemplateItem',
@@ -131,8 +132,8 @@ export default {
       let style = {}
       if (this.subjectItemDetails) {
         style = {
-          opacity: this.subjectItemDetails.chart.customAttr.color.alpha / 100,
-          background: this.subjectItemDetails.chart.customAttr.color.tableHeaderBgColor
+          opacity: this.subjectItemDetails.chart.customAttr.tableColor.alpha / 100,
+          background: this.subjectItemDetails.chart.customAttr.tableColor.tableHeaderBgColor
         }
       }
       return style
@@ -141,7 +142,7 @@ export default {
       let style = {}
       if (this.subjectItemDetails) {
         style = {
-          background: this.subjectItemDetails.chart.customAttr.color.tableFontColor
+          background: this.subjectItemDetails.chart.customAttr.tableColor.tableFontColor
         }
       }
       return style
@@ -189,6 +190,7 @@ export default {
     subjectChange() {
       this.$store.commit('setCanvasStyle', JSON.parse(this.subjectItem.details))
       this.$store.commit('recordSnapshot')
+      bus.$emit('onSubjectChange')
     },
     templateEdit() {
       this.$emit('templateEdit', this.template)
diff --git a/frontend/src/views/panel/SubjectSetting/index.vue b/frontend/src/views/panel/SubjectSetting/index.vue
index f067c0123b..b9b89eb2d2 100644
--- a/frontend/src/views/panel/SubjectSetting/index.vue
+++ b/frontend/src/views/panel/SubjectSetting/index.vue
@@ -6,7 +6,7 @@
       <slider />
     </div>
     <!--折叠面板-->
-    <div style="margin: 10px;overflow-y: auto">
+    <div v-if="collapseShow" style="margin: 10px;overflow-y: auto">
       <el-collapse v-model="activeNames" @change="handleChange">
         <el-collapse-item :title="$t('panel.panel')" name="panel">
           <el-row style="background-color: #f7f8fa; margin: 5px">
@@ -16,7 +16,7 @@
         </el-collapse-item>
         <el-collapse-item :title="$t('chart.module_style')" name="component">
           <el-row style="background-color: #f7f8fa; margin: 5px">
-<!--            <title-selector class="attr-selector" :chart="chart" @onTextChange="onTextChange" />-->
+            <!--            <title-selector class="attr-selector" :chart="chart" @onTextChange="onTextChange" />-->
             <background-color-selector class="attr-selector" :chart="chart" @onChangeBackgroundForm="onChangeBackgroundForm" />
           </el-row>
         </el-collapse-item>
@@ -27,7 +27,7 @@
         </el-collapse-item>
         <el-collapse-item :title="$t('panel.table')" name="table">
           <el-row style="background-color: #f7f8fa; margin: 5px">
-            <color-selector :source-type="'panelTable'" class="attr-selector" :chart="chart" @onColorChange="onColorChange" />
+            <color-selector v-if="tableChart" :source-type="'panelTable'" class="attr-selector" :chart="tableChart" @onColorChange="onTableColorChange" />
           </el-row>
         </el-collapse-item>
       </el-collapse>
@@ -41,10 +41,10 @@ import BackgroundSelector from './PanelStyle/BackgroundSelector'
 import ComponentGap from './PanelStyle/ComponentGap'
 
 import ColorSelector from '@/views/chart/components/shape-attr/ColorSelector'
-import TitleSelector from '@/views/chart/components/component-style/TitleSelector'
 import BackgroundColorSelector from '@/views/chart/components/component-style/BackgroundColorSelector'
 import { mapState } from 'vuex'
 import { deepCopy } from '@/components/canvas/utils/utils'
+import bus from '@/utils/bus'
 
 export default {
   components: {
@@ -52,14 +52,15 @@ export default {
     BackgroundSelector,
     ComponentGap,
     ColorSelector,
-    TitleSelector,
     BackgroundColorSelector
   },
   data() {
     return {
       panelInfo: this.$store.state.panel.panelInfo,
       activeNames: ['panel'],
-      chart: null
+      chart: null,
+      tableChart: null,
+      collapseShow: true
     }
   },
   computed: mapState([
@@ -68,22 +69,38 @@ export default {
 
   watch: {
   },
+
+  mounted() {
+    bus.$on('onSubjectChange', () => {
+      this.collapseShow = false
+      this.$nextTick(() => (this.collapseShow = true))
+    })
+  },
   created() {
-    // 初始化赋值
-    const chart = deepCopy(this.canvasStyleData.chart)
-    if (chart.xaxis) {
-      chart.xaxis = JSON.parse(chart.xaxis)
-    }
-    if (chart.yaxis) {
-      chart.yaxis = JSON.parse(chart.yaxis)
-    }
-    chart.customAttr = JSON.parse(chart.customAttr)
-    chart.customStyle = JSON.parse(chart.customStyle)
-    chart.customFilter = JSON.parse(chart.customFilter)
-    this.chart = chart
+    debugger
+    this.init()
   },
 
   methods: {
+
+    init() {
+      // 初始化赋值
+      const chart = deepCopy(this.canvasStyleData.chart)
+      if (chart.xaxis) {
+        chart.xaxis = JSON.parse(chart.xaxis)
+      }
+      if (chart.yaxis) {
+        chart.yaxis = JSON.parse(chart.yaxis)
+      }
+      chart.customAttr = JSON.parse(chart.customAttr)
+      chart.customStyle = JSON.parse(chart.customStyle)
+      chart.customFilter = JSON.parse(chart.customFilter)
+      this.chart = chart
+
+      // 因为 table 的color 设置和view的共用 所以单独设置一个对象
+      this.tableChart = deepCopy(this.chart)
+      this.tableChart.customAttr.color = this.tableChart.customAttr.tableColor
+    },
     handleChange(val) {
       // console.log(val)
     },
@@ -94,6 +111,10 @@ export default {
       this.chart.customAttr.color = val
       this.save()
     },
+    onTableColorChange(val) {
+      this.chart.customAttr.tableColor = val
+      this.save()
+    },
     onTextChange(val) {
       this.chart.customStyle.text = val
       this.save()
diff --git a/frontend/src/views/panel/list/PanelList.vue b/frontend/src/views/panel/list/PanelList.vue
index 06b3fd8f92..df96a9f6e4 100644
--- a/frontend/src/views/panel/list/PanelList.vue
+++ b/frontend/src/views/panel/list/PanelList.vue
@@ -234,6 +234,7 @@ export default {
               title: '',
               customAttr: JSON.stringify({
                 color: DEFAULT_COLOR_CASE,
+                tableColor: DEFAULT_COLOR_CASE,
                 size: DEFAULT_SIZE,
                 label: DEFAULT_LABEL,
                 tooltip: DEFAULT_TOOLTIP
@@ -279,6 +280,7 @@ export default {
               title: '',
               customAttr: JSON.stringify({
                 color: DEFAULT_COLOR_CASE,
+                tableColor: DEFAULT_COLOR_CASE,
                 size: DEFAULT_SIZE,
                 label: DEFAULT_LABEL,
                 tooltip: DEFAULT_TOOLTIP
diff --git a/frontend/src/views/panel/panel.js b/frontend/src/views/panel/panel.js
index 81158b6e94..c6fee9533c 100644
--- a/frontend/src/views/panel/panel.js
+++ b/frontend/src/views/panel/panel.js
@@ -36,6 +36,7 @@ export const DEFAULT_COMMON_CANVAS_STYLE = {
     title: '',
     customAttr: {
       color: DEFAULT_COLOR_CASE,
+      tableColor: DEFAULT_COLOR_CASE,
       size: DEFAULT_SIZE,
       label: DEFAULT_LABEL,
       tooltip: DEFAULT_TOOLTIP