feat: ✨引入table的列合并功能

xpyjs · Apr 17, 2023 · 6f48a20 · 6f48a20
1 parent c383283
commit 6f48a20
Show file tree

Hide file tree

Showing 8 changed files with 78 additions and 12 deletions.
diff --git a/demo/demo.vue b/demo/demo.vue
@@ -4,8 +4,15 @@
       <x-gantt-column label="group1">
         <x-gantt-column prop="id" width="200px"></x-gantt-column>
         <x-gantt-column label="group2">
-          <x-gantt-column prop="name"></x-gantt-column>
-          <x-gantt-column prop="name2"></x-gantt-column>
+          <x-gantt-column
+            prop="name"
+            :merge="(scope: any) => scope.$index % 3 === 0"
+          ></x-gantt-column>
+          <x-gantt-column
+            prop="name2"
+            :merge="(scope: any) => scope.$index % 2 === 0"
+            >n1</x-gantt-column
+          >
         </x-gantt-column>
       </x-gantt-column>
 

diff --git a/src/components/column/index.vue b/src/components/column/index.vue
@@ -12,7 +12,7 @@
   <div
     class="xg-table-cell"
     :style="{
-      width: getColumnWidth(props?.width ?? Variables.default.tableColumnWidth),
+      width: `${realWidth}px`,
       ...$styleBox.getBorderColor()
     }"
   >
@@ -32,9 +32,10 @@
 <script lang="ts">
 import Variables from '@/constants/vars';
 import columnProps from './props';
-import { defineComponent, useSlots } from 'vue';
+import { defineComponent, useSlots, computed } from 'vue';
 import { getColumnWidth } from './util';
 import useStyle from '@/composables/useStyle';
+import useSlotsBox from '@/composables/useSlotsBox';
 
 export default defineComponent({
   name: Variables.name.column
@@ -47,6 +48,27 @@ const slots = useSlots();
 
 const { $styleBox, rowHeight } = useStyle();
 
+const { $slotsBox, isMerge } = useSlotsBox();
+
+const realWidth = computed(() => {
+  let curWidth = getColumnWidth(
+    props?.width ?? Variables.default.tableColumnWidth
+  );
+
+  for (let i = (props.__index ?? 1) + 1; i < $slotsBox.cols.length; i++) {
+    const col = $slotsBox.cols[i];
+
+    if (isMerge(col.props?.merge, props.data!)) {
+      curWidth += getColumnWidth(
+        col.props?.width ?? Variables.default.tableColumnWidth
+      );
+    } else {
+      break;
+    }
+  }
+
+  return curWidth;
+});
 // TODO: 合并列通过这个实现
 // const colspan = ref(1);
 </script>

diff --git a/src/components/column/props.ts b/src/components/column/props.ts
@@ -1,5 +1,6 @@
 import Variables from '@/constants/vars';
 import RowItem from '@/models/data/row';
+import { type PropType } from 'vue';
 
 export default {
   /**
@@ -20,6 +21,15 @@ export default {
    */
   label: String,
 
+  /**
+   * 是否合并，一个函数，抛出当前数据，接收true / false，true为合并当前行，与前置列合并
+   */
+  merge: {
+    type: [Function, Boolean] as PropType<boolean | ((data: any) => boolean)>,
+    default: () => false
+  },
+
   // ********* 内部参数 ********* //
-  data: RowItem
+  data: RowItem,
+  __index: Number
 };
diff --git a/src/components/column/util.ts b/src/components/column/util.ts
@@ -1,3 +1,3 @@
 export const getColumnWidth = (width: number | string) => {
-  return `${typeof width === 'number' ? width : Number.parseInt(width)}px`;
+  return typeof width === 'number' ? width : Number.parseInt(width);
 };
diff --git a/src/components/common/TableBody.vue b/src/components/common/TableBody.vue
@@ -43,8 +43,13 @@
         ...$styleBox.getBorderColor()
       }"
     >
-      <template v-for="(c, i) in $slotsBox.cols" :key="i">
-        <component :is="c" :data="d" />
+      <template
+        v-for="(c, i) in $slotsBox.cols.filter(
+          v => !isMerge(v.props?.merge, d as any)
+        )"
+        :key="i"
+      >
+        <component :is="c" :data="d" :__index="i" />
       </template>
     </div>
   </div>
@@ -64,7 +69,7 @@ import useStyle from '@/composables/useStyle';
 
 const props = defineProps<{ gap: number }>();
 
-const { $slotsBox } = useSlotsBox();
+const { $slotsBox, isMerge } = useSlotsBox();
 const { bodyHeight, rowHeight, $styleBox } = useStyle();
 const { inView } = useInView();
 </script>

diff --git a/src/components/common/TableHeader.vue b/src/components/common/TableHeader.vue
@@ -4,7 +4,9 @@
       <template v-for="(c, i) in $slotsBox.cols" :key="i">
         <col
           :width="
-            getColumnWidth(c.props?.width ?? Variables.default.tableColumnWidth)
+            getColumnWidth(
+              c.props?.width ?? Variables.default.tableColumnWidth
+            ) + 'px'
           "
         />
       </template>

diff --git a/src/composables/useData.ts b/src/composables/useData.ts
@@ -1,3 +1,4 @@
+import type RowItem from '@/models/data/row';
 import { useStore } from '@/store';
 import { computed, watch, type Ref } from 'vue';
 import useGanttWidth from './useGanttWidth';
@@ -36,10 +37,18 @@ export default () => {
     );
   }
 
+  function toRowData(data: RowItem) {
+    return {
+      row: data.data,
+      $index: data.flatIndex
+    };
+  }
+
   return {
     $data: store.$data,
     initData,
     dateList: computed(() => store.ganttHeader.headers),
-    setGanttHeaders
+    setGanttHeaders,
+    toRowData
   };
 };
diff --git a/src/composables/useSlotsBox.ts b/src/composables/useSlotsBox.ts
@@ -1,5 +1,7 @@
+import type RowItem from '@/models/data/row';
 import { useStore } from '@/store';
 import { type Slots } from 'vue';
+import useData from './useData';
 import useTableWidth from './useTableWidth';
 
 export default () => {
@@ -14,5 +16,14 @@ export default () => {
     setTableWidth(store.$slotsBox.cols);
   }
 
-  return { $slotsBox: store.$slotsBox, setSlots };
+  const { toRowData } = useData();
+
+  function isMerge(
+    m: boolean | undefined | ((data: any) => boolean),
+    data: RowItem
+  ) {
+    return typeof m === 'function' ? m(toRowData(data)) : !!m;
+  }
+
+  return { $slotsBox: store.$slotsBox, setSlots, isMerge };
 };