fix: 🐛解决展开后 column 错乱以及表头出现异常的问题

demo/demo.vue

@@ -78,7 +78,7 @@
     <button @click="onAdd">增加</button>
     <button @click="onReduce">减少</button>
     <button @click="onExpand">{{ showExpand ? '隐藏' : '展示' }}</button>
-    <button @click="expandAll = !expandAll">
+    <button @click="onExpandAll">
       {{ expandAll ? '闭合' : '展开' }}
     </button>
     <button @click="onChangeBorderColor">border颜色</button>
@@ -92,7 +92,7 @@ let id = 0;
 
 const ganttData = reactive<any>([]);
 
-for (let i = 0; i < 50; i++) {
+for (let i = 0; i < 5; i++) {
   onAdd();
 }
 
@@ -140,6 +140,9 @@ function onExpand() {
   showExpand.value = !showExpand.value;
 }
 const expandAll = ref(false);
+function onExpandAll() {
+  expandAll.value = !expandAll.value;
+}
 
 const colors = ['red', 'blue', 'green', 'yellow', 'pink', 'orange'];
 const borderColor = ref('');

package.json

@@ -71,7 +71,7 @@
     "@vueuse/core": "^10.0.0",
     "dayjs": "^1.11.7",
     "lodash": "^4.17.21",
-    "vue": "^3.2.47"
+    "vue": "3.2.25"
   },
   "devDependencies": {
     "@changesets/cli": "^2.26.1",

src/components/column/index.vue

@@ -1,8 +1,9 @@
 <template>
   <div
+    v-if="props.__index === 0 || !isMerge($slotsBox.cols[props.__index ?? 1].props?.merge, props.data!)"
+    :key="`${props.data!.uuid}_${props.__index}`"
     class="xg-table-cell"
     :style="{
-      // width: `${props.__index === 0 ? firstColumnWidth : realWidth}px`,
       width: `${realWidth}px`,
       ...$styleBox.getBorderColor()
     }"
@@ -36,12 +37,11 @@
 <script lang="ts">
 import Variables from '@/constants/vars';
 import columnProps from './props';
-import { defineComponent, useSlots, computed, watch } from 'vue';
+import { defineComponent, useSlots, computed } from 'vue';
 import useStyle from '@/composables/useStyle';
 import useSlotsBox from '@/composables/useSlotsBox';
 import SelectionVue from './selection.vue';
 import useData from '@/composables/useData';
-// import useData from '@/composables/useData';
 import { formatDate } from '@/utils/date';
 
 export default defineComponent({
@@ -52,12 +52,6 @@ export default defineComponent({
 <script lang="ts" setup>
 const props = defineProps(columnProps);
 const slots = useSlots();
-watch(
-  () => slots,
-  (o, n) => {
-    console.log(o, n);
-  }
-);
 
 const { $styleBox, rowHeight } = useStyle();
 const { toRowData, getProp } = useData();

src/components/common/TableBody.vue

@@ -2,12 +2,7 @@
   <div class="xg-table-body" :style="{ height: bodyHeight }">
     <template v-for="d in inView" :key="d.uuid">
       <RowVue class="xg-table-row" :data="d">
-        <template
-          v-for="(c, i) in $slotsBox.cols.filter(
-            v => !isMerge(v.props?.merge, d)
-          )"
-          :key="i"
-        >
+        <template v-for="(c, i) in $slotsBox.cols" :key="`${d.uuid}_${i}`">
           <component :is="c" :data="d" />
         </template>
       </RowVue>
@@ -30,9 +25,10 @@ import RowVue from './Row.vue';
 
 const props = defineProps<{ gap: number }>();
 
-const { $slotsBox, isMerge } = useSlotsBox();
 const { bodyHeight } = useStyle();
 const { inView } = useInView();
+
+const { $slotsBox } = useSlotsBox();
 </script>
 
 <style lang="scss" scoped>

src/composables/useSlotsBox.ts

@@ -1,6 +1,6 @@
 import type RowItem from '@/models/data/row';
 import { useStore } from '@/store';
-import { watch, type Slots } from 'vue';
+import { type Slots } from 'vue';
 import useData from './useData';
 
 export default () => {
@@ -19,12 +19,12 @@ export default () => {
     return typeof m === 'function' ? m(toRowData(data)) : !!m;
   }
 
-  watch(
-    () => [store.$styleBox.showCheckbox],
-    () => {
-      store.$slotsBox.setSlots(store.$slotsBox.cols);
-    }
-  );
+  // watch(
+  //   () => [store.$styleBox.showCheckbox],
+  //   () => {
+  //     store.$slotsBox.setSlots(store.$slotsBox.cols);
+  //   }
+  // );
 
   return { $slotsBox: store.$slotsBox, setSlots, isMerge };
 };

src/composables/useStyle.ts

@@ -1,6 +1,6 @@
 import type rootProps from '@/components/root/rootProps';
 import { useStore } from '@/store';
-import { type ExtractPropTypes, computed, watch } from 'vue';
+import { type ExtractPropTypes, computed, unref, watch } from 'vue';
 
 export default () => {
   const store = useStore();
@@ -16,18 +16,18 @@ export default () => {
       store.$styleBox.setBorder(props.border);
       store.$styleBox.setBorderColor(props.borderColor);
 
-      store.$styleBox.ganttColumnSize = props.ganttColumnSize;
-      store.$styleBox.unit = props.unit;
-      store.$styleBox.rowHeight = props.rowHeight;
-      store.$styleBox.showCheckbox = props.showCheckbox;
-      store.$styleBox.highlightDate = props.highlightDate;
-      store.$styleBox.showExpand = props.showExpand;
-      store.$styleBox.showToday = props.showToday;
-      store.$styleBox.showWeekend = props.showWeekend;
-      store.$styleBox.levelColor = props.levelColor;
-      store.$styleBox.headerStyle = props.headerStyle;
-      store.$styleBox.bodyStyle = props.bodyStyle;
-      store.$styleBox.primaryColor = props.primaryColor;
+      store.$styleBox.ganttColumnSize = unref(props.ganttColumnSize);
+      store.$styleBox.unit = unref(props.unit);
+      store.$styleBox.rowHeight = unref(props.rowHeight);
+      store.$styleBox.showCheckbox = unref(props.showCheckbox);
+      store.$styleBox.highlightDate = unref(props.highlightDate);
+      store.$styleBox.showExpand = unref(props.showExpand);
+      store.$styleBox.showToday = unref(props.showToday);
+      store.$styleBox.showWeekend = unref(props.showWeekend);
+      store.$styleBox.levelColor = unref(props.levelColor);
+      store.$styleBox.headerStyle = unref(props.headerStyle);
+      store.$styleBox.bodyStyle = unref(props.bodyStyle);
+      store.$styleBox.primaryColor = unref(props.primaryColor);
     };
 
     fn();