fix: 修改切换轮播表格配置不会变的问题

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(
+  () => 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){
+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>

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>