From 2a9983047a5ae3dbd611f83b8826f4c7d75a822a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=A5=94=E8=B7=91=E7=9A=84=E9=9D=A2=E6=9D=A1?=
 <1262327911@qq.com>
Date: Wed, 5 Oct 2022 17:08:52 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E4=BF=AE=E6=94=B9=E5=88=87=E6=8D=A2?=
 =?UTF-8?q?=E8=BD=AE=E6=92=AD=E8=A1=A8=E6=A0=BC=E9=85=8D=E7=BD=AE=E4=B8=8D?=
 =?UTF-8?q?=E4=BC=9A=E5=8F=98=E7=9A=84=E9=97=AE=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../Tables/Tables/TableScrollBoard/config.vue | 79 +++++++------------
 .../components/ChartSetting/index.vue         |  3 +-
 2 files changed, 30 insertions(+), 52 deletions(-)

diff --git a/src/packages/components/Tables/Tables/TableScrollBoard/config.vue b/src/packages/components/Tables/Tables/TableScrollBoard/config.vue
index 9dd1e12d..834cfb5b 100644
--- a/src/packages/components/Tables/Tables/TableScrollBoard/config.vue
+++ b/src/packages/components/Tables/Tables/TableScrollBoard/config.vue
@@ -28,57 +28,29 @@
       <SettingItem name="显示行号">
         <n-switch size="small" v-model:value="optionData.index" />
       </SettingItem>
-      
     </SettingItemBox>
 
     <SettingItemBox name="配置" :alone="true">
       <SettingItem name="表头数据">
-        <n-input
-          v-model:value="header"
-          :min="1"
-          size="small"
-          placeholder="表头数据(英文','分割)"
-        ></n-input>
+        <n-input v-model:value="header" :min="1" size="small" placeholder="表头数据(英文','分割)"></n-input>
       </SettingItem>
       <SettingItem name="列对齐方式">
-        <n-input
-          v-model:value="align"
-          :min="1"
-          size="small"
-          placeholder="对齐方式(英文','分割)"
-        ></n-input>
+        <n-input v-model:value="align" :min="1" size="small" placeholder="对齐方式(英文','分割)"></n-input>
       </SettingItem>
       <SettingItem name="列宽度">
-        <n-input
-          v-model:value="columnWidth"
-          :min="1"
-          size="small"
-          placeholder="列宽度(英文','分割)"
-        ></n-input>
+        <n-input v-model:value="columnWidth" :min="1" size="small" placeholder="列宽度(英文','分割)"></n-input>
       </SettingItem>
     </SettingItemBox>
 
     <SettingItemBox name="样式">
       <SettingItem name="表头背景色">
-        <n-color-picker
-          size="small"
-          :modes="['hex']"
-          v-model:value="optionData.headerBGC"
-        ></n-color-picker>
+        <n-color-picker size="small" :modes="['hex']" v-model:value="optionData.headerBGC"></n-color-picker>
       </SettingItem>
       <SettingItem name="奇数行背景色">
-        <n-color-picker
-          size="small"
-          :modes="['hex']"
-          v-model:value="optionData.oddRowBGC"
-        ></n-color-picker>
+        <n-color-picker size="small" :modes="['hex']" v-model:value="optionData.oddRowBGC"></n-color-picker>
       </SettingItem>
       <SettingItem name="偶数行背景色">
-        <n-color-picker
-          size="small"
-          :modes="['hex']"
-          v-model:value="optionData.evenRowBGC"
-        ></n-color-picker>
+        <n-color-picker size="small" :modes="['hex']" v-model:value="optionData.evenRowBGC"></n-color-picker>
       </SettingItem>
     </SettingItemBox>
   </CollapseItem>
@@ -86,36 +58,43 @@
 
 <script setup lang="ts">
 import { PropType, ref, watch } from 'vue'
-import {
-  CollapseItem,
-  SettingItemBox,
-  SettingItem,
-} from '@/components/Pages/ChartItemSetting'
+import { CollapseItem, SettingItemBox, SettingItem } from '@/components/Pages/ChartItemSetting'
 import { option } from './config'
 
 const props = defineProps({
   optionData: {
     type: Object as PropType<typeof option>,
-    required: true,
-  },
+    required: true
+  }
 })
 
-const header = ref(props.optionData.header.toString())
-const align = ref(props.optionData.align.toString())
-const columnWidth = ref(props.optionData.columnWidth.toString())
+const header = ref()
+const align = ref()
+const columnWidth = ref()
 
-watch([header, align, columnWidth],([headerNew,alignNew,columnWidthNew],[headerOld,alignOld,columnWidthOld])=>{
-  if(headerNew !== headerOld){
+watch(
+  () => props.optionData,
+  newData => {
+    header.value = props.optionData.header.toString()
+    align.value = props.optionData.align.toString()
+    columnWidth.value = props.optionData.columnWidth.toString()
+  },
+  {
+    deep: false,
+    immediate: true
+  }
+)
+
+watch([header, align, columnWidth], ([headerNew, alignNew, columnWidthNew], [headerOld, alignOld, columnWidthOld]) => {
+  if (headerNew !== headerOld) {
     props.optionData.header = headerNew.split(',')
   }
-  if(alignNew !== alignOld){
+  if (alignNew !== alignOld) {
     props.optionData.align = alignNew.split(',')
   }
-  if(columnWidthNew !== columnWidthOld){
+  if (columnWidthNew !== columnWidthOld) {
     // @ts-ignore
     props.optionData.columnWidth = columnWidthNew.split(',')
   }
 })
-
-
 </script>
diff --git a/src/views/chart/ContentConfigurations/components/ChartSetting/index.vue b/src/views/chart/ContentConfigurations/components/ChartSetting/index.vue
index 6718e34f..21c7d96a 100644
--- a/src/views/chart/ContentConfigurations/components/ChartSetting/index.vue
+++ b/src/views/chart/ContentConfigurations/components/ChartSetting/index.vue
@@ -5,7 +5,7 @@
     <!-- 尺寸 -->
     <size-setting :isGroup="targetData.isGroup" :chartAttr="targetData.attr"></size-setting>
     <!-- 位置 -->
-    <position-setting :chartAttr="targetData.attr" :canvasConfig="chartEditStore.getEditCanvasConfig"/>
+    <position-setting :chartAttr="targetData.attr" :canvasConfig="chartEditStore.getEditCanvasConfig" />
     <!-- 滤镜 -->
     <styles-setting :isGroup="targetData.isGroup" :chartStyles="targetData.styles"></styles-setting>
     <!-- 自定义配置项 -->
@@ -17,7 +17,6 @@
 import { NameSetting, PositionSetting, SizeSetting, StylesSetting } from '@/components/Pages/ChartItemSetting'
 import { useTargetData } from '../hooks/useTargetData.hook'
 const { targetData, chartEditStore } = useTargetData()
-
 </script>
 
 <style lang="scss" scoped>