feat(header): ✨ 添加每列表头（table）的插槽

#44
xpyjs · Jun 5, 2023 · c6664bd · c6664bd
1 parent 9ba8685
commit c6664bd
Show file tree

Hide file tree

Showing 4 changed files with 80 additions and 40 deletions.
diff --git a/src/components/column/index.vue b/src/components/column/index.vue
@@ -1,42 +1,53 @@
 <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: `${realWidth}px`,
-      'border-color': $styleBox.borderColor
-    }"
-  >
-    <div :style="{ lineHeight: `${rowHeight}px`, height: `${rowHeight}px` }">
-      <div v-if="props.__index === 0" ref="selectionRef" class="prefix">
-        <SelectionVue :data="data" :indent="20" />
-      </div>
+  <template v-if="props.__renderTitle">
+    <slot name="title" v-bind="__renderTitleProps">
+      <span>{{ props.__renderTitleLabel }}</span>
+    </slot>
+  </template>
+
+  <template v-else-if="props.data">
+    <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: `${realWidth}px`,
+        'border-color': $styleBox.borderColor
+      }"
+    >
+      <div :style="{ lineHeight: `${rowHeight}px`, height: `${rowHeight}px` }">
+        <div v-if="props.__index === 0" ref="selectionRef" class="prefix">
+          <SelectionVue :data="data" :indent="20" />
+        </div>
+
+        <div
+          :class="[
+            'cell',
+            {
+              'cell-center': props.center,
+              'cell-ellipsis': props.ellipsis
+            },
+            props.columnClass
+          ]"
+          :style="[
+            props.columnStyle,
+            { width: `calc(100% - ${prefixWidth}px` }
+          ]"
+        >
+          <slot
+            v-if="isValidSlots(slots.default, props.data)"
+            v-bind="toRowData(props.data)"
+          />
 
-      <div
-        :class="[
-          'cell',
-          {
-            'cell-center': props.center,
-            'cell-ellipsis': props.ellipsis
-          },
-          props.columnClass
-        ]"
-        :style="[props.columnStyle, { width: `calc(100% - ${prefixWidth}px` }]"
-      >
-        <slot
-          v-if="isValidSlots(slots.default, props.data)"
-          v-bind="toRowData(props.data)"
-        />
-
-        <template v-else-if="props.prop || props.label">{{
-          props.dateFormat
-            ? day(originData).format(props.dateFormat)
-            : originData
-        }}</template>
+          <template v-else-if="props.prop || props.label">{{
+            props.dateFormat
+              ? day(originData).format(props.dateFormat)
+              : originData
+          }}</template>
+        </div>
       </div>
     </div>
-  </div>
+  </template>
 </template>
 
 <script lang="ts">

diff --git a/src/components/column/props.ts b/src/components/column/props.ts
@@ -78,5 +78,8 @@ export default {
 
   // ********* 内部参数 ********* //
   data: RowItem,
-  __index: Number
+  __index: Number,
+  __renderTitle: Boolean,
+  __renderTitleLabel: String,
+  __renderTitleProps: Object
 };
diff --git a/src/components/container/TableHeaderTh.vue b/src/components/container/TableHeaderTh.vue
@@ -11,16 +11,21 @@
     :colspan="column.colSpan"
     :rowspan="column.rowSpan"
   >
-    {{ column.label }}
+    <component
+      :is="column.node"
+      __render-title
+      :__render-title-label="column.label"
+      :__render-title-props="titleProps"
+    />
   </th>
 </template>
 
 <script lang="ts" setup>
+import { Ref, ref } from 'vue';
 import useDrag from '@/composables/useDrag';
 import useSlotsBox from '@/composables/useSlotsBox';
 import useStyle from '@/composables/useStyle';
 import Variables from '@/constants/vars';
-import { Ref, ref } from 'vue';
 
 const props = defineProps({
   column: {
@@ -30,7 +35,6 @@ const props = defineProps({
 });
 
 const { $slotsBox } = useSlotsBox();
-
 const { $styleBox } = useStyle();
 const { onResizeTableColumn } = useDrag();
 
@@ -52,7 +56,7 @@ onResizeTableColumn(headerRef, {
     );
   },
 
-  preMove: (x, clientX) => {
+  preMove: x => {
     if (
       $slotsBox.tableHeaders.leafs[index].width + x <
       Variables.size.minTableColumnWidth
@@ -61,6 +65,17 @@ onResizeTableColumn(headerRef, {
     return true;
   }
 });
+
+const titleProps = props.column.isLeaf
+  ? {
+      prop: props.column.prop,
+      label: props.column.label,
+      level: props.column.level // 表头层级，从上到下，从1开始
+    }
+  : {
+      label: props.column.label,
+      level: props.column.level // 表头层级，从上到下，从1开始
+    };
 </script>
 
 <style lang="scss">

diff --git a/src/models/param/header.ts b/src/models/param/header.ts
@@ -22,15 +22,24 @@ class Column {
 }
 
 class TableColumn extends Column {
+  uuid: string = uuid();
   node: VNode;
   /**
    * 非叶子结点只接收 label 参数作为标题
    */
   label: string;
+  prop?: string;
   declare children?: TableColumn[];
   parent?: TableColumn;
   width: number = Variables.default.tableColumnWidth;
+  /**
+   * 是否是当前行的最后一列
+   */
   isLast: boolean = false;
+  /**
+   * 是否为当前列的最后一个叶子结点（最下面的一行）
+   */
+  isLeaf: boolean = false;
 
   /**
    *
@@ -172,6 +181,8 @@ class TableHeader extends Header {
         // 非叶子结点只接收 label 参数作为展示。叶子结点还可以展示 prop 参数值
         if (!column.label) column.label = column.node.props?.prop ?? '';
 
+        column.prop = column.node.props?.prop;
+        column.isLeaf = true;
         result.push(column);
         this.leafs.push(column);
       }