stk-table-vue 0.0.2 → 0.2.0

package/src/StkTable/StkTable.vue

@@ -15,15 +15,15 @@
             'border-body-v': props.bordered === 'body-v',
             stripe: props.stripe,
         }"
-        :style="virtual && { '--row-height': virtualScroll.rowHeight + 'px' }"
+        :style="
+            virtual && {
+                '--row-height': virtualScroll.rowHeight + 'px',
+                '--header-row-height': (props.headerRowHeight || props.rowHeight) + 'px',
+            }
+        "
         @scroll="onTableScroll"
         @wheel="onTableWheel"
     >
-        <!-- 横向滚动时固定列的阴影，TODO: 覆盖一层在整个表上，使用linear-gradient 绘制阴影-->
-        <!-- <div
-        :class="showFixedLeftShadow && 'stk-table-fixed-left-col-box-shadow'"
-        :style="{ width: fixedLeftColWidth + 'px' }"
-      ></div> -->
         <!-- 这个元素用于虚拟滚动时，撑开父容器的高度 （已弃用，因为滚动条拖动过快，下方tr为加载出来时，会导致表头sticky闪动）
         <div
           v-if="virtual"
@@ -67,8 +67,7 @@
                             col.dataIndex === sortCol && sortOrderIndex !== 0 && 'sorter-' + sortSwitchOrder[sortOrderIndex],
                             showHeaderOverflow ? 'text-overflow' : '',
                             col.headerClassName,
-                            col.fixed ? 'fixed-cell' : '',
-                            col.fixed ? 'fixed-cell--' + col.fixed : '',
+                            getFixedColClass(col),
                         ]"
                         @click="
                             e => {
@@ -83,7 +82,7 @@
                         <div class="table-header-cell-wrapper">
                             <component :is="col.customHeaderCell" v-if="col.customHeaderCell" :col="col" />
                             <template v-else>
-                                <slot name="tableHeader" :column="col">
+                                <slot name="tableHeader" :col="col">
                                     <span class="table-header-title">{{ col.title }}</span>
                                 </slot>
                             </template>
@@ -91,14 +90,12 @@
                             <!-- 排序图图标 -->
                             <span v-if="col.sorter" class="table-header-sorter">
                                 <svg xmlns="http://www.w3.org/2000/svg" width="16px" height="16px" viewBox="0 0 16 16">
-                                    <g id="sort-btn">
-                                        <polygon id="arrow-up" fill="#757699" points="8 2 4.8 6 11.2 6"></polygon>
-                                        <polygon
-                                            id="arrow-down"
-                                            transform="translate(8, 12) rotate(-180) translate(-8, -12) "
-                                            points="8 10 4.8 14 11.2 14"
-                                        ></polygon>
-                                    </g>
+                                    <polygon class="arrow-up" fill="#757699" points="8 2 4.8 6 11.2 6"></polygon>
+                                    <polygon
+                                        class="arrow-down"
+                                        transform="translate(8, 12) rotate(-180) translate(-8, -12) "
+                                        points="8 10 4.8 14 11.2 14"
+                                    ></polygon>
                                 </svg>
                             </span>
                             <!-- 列宽拖动handler -->
@@ -146,7 +143,7 @@
                     :key="rowKey ? rowKeyGen(row) : i"
                     :data-row-key="rowKey ? rowKeyGen(row) : i"
                     :class="{
-                        active: rowKey ? rowKeyGen(row) === (currentItem && rowKeyGen(currentItem)) : row === currentItem,
+                        active: rowKey ? rowKeyGen(row) === rowKeyGen(currentItem) : row === currentItem,
                         hover: rowKey ? rowKeyGen(row) === currentHover : row === currentHover,
                         [rowClassName(row, i)]: true,
                     }"
@@ -164,12 +161,7 @@
                         v-for="col in virtualX_columnPart"
                         :key="col.dataIndex"
                         :data-index="col.dataIndex"
-                        :class="[
-                            col.className,
-                            showOverflow ? 'text-overflow' : '',
-                            col.fixed ? 'fixed-cell' : '',
-                            col.fixed ? 'fixed-cell--' + col.fixed : '',
-                        ]"
+                        :class="[col.className, showOverflow ? 'text-overflow' : '', getFixedColClass(col)]"
                         :style="getCellStyle(2, col)"
                         @click="e => onCellClick(e, row, col)"
                     >
@@ -188,7 +180,7 @@
     </div>
 </template>
 
-<script setup lang="ts">
+<script setup lang="tsx">
 /**
  * @author JA+
  * 不支持低版本浏览器非虚拟滚动表格的表头固定，列固定，因为会卡。
@@ -198,9 +190,11 @@
  * [] highlight-row 颜色不能恢复到active的颜色
  */
 import { CSSProperties, onMounted, ref, shallowRef, toRaw, watch } from 'vue';
+import { Default_Row_Height } from './const';
 import { Order, SortOption, StkTableColumn, UniqKey } from './types/index';
 import { useAutoResize } from './useAutoResize';
 import { useColResize } from './useColResize';
+import { useFixedCol } from './useFixedCol';
 import { useFixedStyle } from './useFixedStyle';
 import { useHighlight } from './useHighlight';
 import { useKeyboardArrowScroll } from './useKeyboardArrowScroll';
@@ -230,14 +224,16 @@ const props = withDefaults(
         theme?: 'light' | 'dark';
         /** 行高 */
         rowHeight?: number;
+        /** 表头行高。default = rowHeight */
+        headerRowHeight?: number | null;
         /** 虚拟滚动 */
         virtual?: boolean;
         /** x轴虚拟滚动 */
         virtualX?: boolean;
         /** 表格列配置 */
-        columns?: StkTableColumn<any>[];
+        columns?: StkTableColumn<DT>[];
         /** 表格数据源 */
-        dataSource?: any[];
+        dataSource?: DT[];
         /** 行唯一键 */
         rowKey?: UniqKey;
         /** 列唯一键 */
@@ -285,6 +281,10 @@ const props = withDefaults(
          * 传入方法表示resize后的回调
          */
         autoResize?: boolean | (() => void);
+        /** 是否展示固定列阴影。默认不展示。 */
+        fixedColShadow?: boolean;
+        /** 优化vue2 滚动 */
+        optimizeVue2Scroll?: boolean;
     }>(),
     {
         width: '',
@@ -294,7 +294,8 @@ const props = withDefaults(
         maxWidth: '',
         headless: false,
         theme: 'light',
-        rowHeight: 28,
+        rowHeight: Default_Row_Height,
+        headerRowHeight: null,
         virtual: false,
         virtualX: false,
         columns: () => [],
@@ -314,43 +315,98 @@ const props = withDefaults(
         colMinWidth: 10,
         bordered: true,
         autoResize: true,
+        fixedColShadow: false,
+        optimizeVue2Scroll: false,
     },
 );
 
 const emits = defineEmits<{
-    /** 排序变更触发 */
+    /**
+     * 排序变更触发
+     * ```(col: StkTableColumn<DT>, order: Order, data: DT[])```
+     */
     (e: 'sort-change', col: StkTableColumn<DT>, order: Order, data: DT[]): void;
-    /** 一行点击事件 */
+    /**
+     * 一行点击事件
+     * ```(ev: MouseEvent, row: DT)```
+     */
     (e: 'row-click', ev: MouseEvent, row: DT): void;
-    /** 选中一行触发。ev返回null表示不是点击事件触发的 */
+    /**
+     * 选中一行触发。ev返回null表示不是点击事件触发的
+     * ```(ev: MouseEvent | null, row: DT)```
+     */
     (e: 'current-change', ev: MouseEvent | null, row: DT): void;
-    /** 行双击事件 */
+    /**
+     * 行双击事件
+     * ```(ev: MouseEvent, row: DT)```
+     */
     (e: 'row-dblclick', ev: MouseEvent, row: DT): void;
-    /** 表头右键事件 */
+    /**
+     * 表头右键事件
+     * ```(ev: MouseEvent)```
+     */
     (e: 'header-row-menu', ev: MouseEvent): void;
-    /** 表体行右键点击事件 */
+    /**
+     * 表体行右键点击事件
+     * ```(ev: MouseEvent, row: DT)```
+     */
     (e: 'row-menu', ev: MouseEvent, row: DT): void;
-    /** 单元格点击事件 */
+    /**
+     * 单元格点击事件
+     * ```(ev: MouseEvent, row: DT, col: StkTableColumn<DT>)```
+     */
     (e: 'cell-click', ev: MouseEvent, row: DT, col: StkTableColumn<DT>): void;
-    /**表头单元格点击事件 */
+    /**
+     * 表头单元格点击事件
+     * ```(ev: MouseEvent, col: StkTableColumn<DT>)```
+     */
     (e: 'header-cell-click', ev: MouseEvent, col: StkTableColumn<DT>): void;
-    /** 表格滚动事件 */
+    /**
+     * 表格滚动事件
+     * ```(ev: Event, data: { startIndex: number; endIndex: number })```
+     */
     (e: 'scroll', ev: Event, data: { startIndex: number; endIndex: number }): void;
-    /** 表格横向滚动事件 */
+    /**
+     * 表格横向滚动事件
+     * ```(ev: Event)```
+     */
     (e: 'scroll-x', ev: Event): void;
-    /** 表头列拖动事件 */
+    /**
+     * 表头列拖动事件
+     * ```(dragStartKey: string, targetColKey: string)```
+     */
     (e: 'col-order-change', dragStartKey: string, targetColKey: string): void;
-    /** 表头列拖动开始 */
+    /**
+     * 表头列拖动开始
+     * ```(dragStartKey: string)```
+     */
     (e: 'th-drag-start', dragStartKey: string): void;
-    /** 表头列拖动drop */
+    /**
+     * 表头列拖动drop
+     * ```(targetColKey: string)```
+     */
     (e: 'th-drop', targetColKey: string): void;
+    /** v-model:columns col resize 时更新宽度*/
     (e: 'update:columns', cols: StkTableColumn<DT>[]): void;
 }>();
 
+// 仅支持vue3.3+
+// const slots = defineSlots<{
+//     /** 表头插槽 */
+//     tableHeader(props: { col: StkTableColumn<DT> }): void;
+//     /** 空状态插槽 */
+//     empty(): void;
+// }>();
+
 const tableContainer = ref<HTMLDivElement>();
 const colResizeIndicator = ref<HTMLDivElement>();
 /** 当前选中的一行*/
 const currentItem = ref<DT | null>(null);
+/**
+ * 保存当前选中行的key<br>
+ * 原因：vue3 不用ref包dataSource时，row为原始对象，与currentItem（Ref）相比会不相等。
+ */
+const currentItemKey = ref<any>(null);
 /** 当前hover的行 */
 const currentHover = ref<DT | null>(null);
 
@@ -376,7 +432,7 @@ const tableHeaders = ref<StkTableColumn<DT>[][]>([]);
 /** 若有多级表头时，最后一行的tableHeaders.内容是 props.columns 的引用集合  */
 const tableHeaderLast = ref<StkTableColumn<DT>[]>([]);
 
-const dataSourceCopy = shallowRef([...props.dataSource]);
+const dataSourceCopy = shallowRef<DT[]>([...props.dataSource]);
 
 /**高亮帧间隔 
 const highlightStepDuration = Highlight_Color_Change_Freq / 1000 + 's';*/
@@ -431,9 +487,18 @@ if (props.autoResize) {
 
 /** 键盘箭头滚动 */
 useKeyboardArrowScroll(tableContainer, {
+    props,
     scrollTo,
     virtualScroll,
     virtualScrollX,
+    tableHeaders,
+});
+
+/** 固定列处理 */
+const { getFixedColClass, dealFixedColShadow, updateFixedShadow } = useFixedCol({
+    props,
+    tableContainer,
+    tableHeaderLast,
 });
 
 watch(
@@ -453,7 +518,6 @@ watch(
             console.warn('invalid dataSource');
             return;
         }
-        // dealColumns(val);
         let needInitVirtualScrollY = false;
         if (dataSourceCopy.value.length !== val.length) {
             needInitVirtualScrollY = true;
@@ -467,18 +531,22 @@ watch(
             const column = tableHeaderLast.value.find(it => it.dataIndex === sortCol.value);
             onColumnSort(column, false);
         }
+        updateFixedShadow();
     },
     {
         deep: false,
     },
 );
+
+watch(() => props.fixedColShadow, dealFixedColShadow);
+
 onMounted(() => {
     initVirtualScroll();
+    updateFixedShadow();
 });
 
 /**
  * 处理多级表头
- * FIXME: 仅支持到两级表头。不支持多级。
  */
 function dealColumns() {
     // reset
@@ -497,9 +565,10 @@ function dealColumns() {
     /**
      * @param arr
      * @param depth 深度
+     * @param parent 父节点引用，用于构建双向链表。
      * @param parentFixed 父节点固定列继承。
      */
-    function flat(arr: StkTableColumn<any>[], depth = 0 /* , parentFixed: 'left' | 'right' | null = null */) {
+    function flat(arr: StkTableColumn<DT>[], parent: StkTableColumn<DT> | null, depth = 0 /* , parentFixed: 'left' | 'right' | null = null */) {
         if (!tableHeaders.value[depth]) {
             tableHeaders.value[depth] = [];
         }
@@ -510,11 +579,13 @@ function dealColumns() {
             // if (parentFixed) {
             //     col.fixed = parentFixed;
             // }
+            // 构建指向父节点的引用
+            col.__PARENT__ = parent;
             /** 一列中的子节点数量 */
             let colChildrenLen = 1;
             if (col.children) {
                 // DFS
-                colChildrenLen = flat(col.children, depth + 1 /* , col.fixed */);
+                colChildrenLen = flat(col.children, col, depth + 1 /* , col.fixed */);
             } else {
                 tempHeaderLast.push(col); // 没有children的列作为colgroup
             }
@@ -532,15 +603,18 @@ function dealColumns() {
         });
         return allChildrenLen;
     }
-    flat(copyColumn);
+
+    flat(copyColumn, null);
 
     tableHeaderLast.value = tempHeaderLast;
+    dealFixedColShadow();
 }
 
 /**
  * 行唯一值生成
  */
-function rowKeyGen(row: any) {
+function rowKeyGen(row: DT) {
+    if (!row) return;
     let key = rowKeyGenStore.get(row);
     if (!key) {
         key = typeof props.rowKey === 'function' ? props.rowKey(row) : row[props.rowKey];
@@ -629,8 +703,9 @@ function onColumnSort(col?: StkTableColumn<any>, click = true, options: { force?
 function onRowClick(e: MouseEvent, row: DT) {
     emits('row-click', e, row);
     // 选中同一行不触发current-change 事件
-    if (currentItem.value === row) return;
+    if (props.rowKey ? currentItemKey.value === rowKeyGen(row) : currentItem.value === row) return;
     currentItem.value = row;
+    currentItemKey.value = rowKeyGen(row);
     emits('current-change', e, row);
 }
 
@@ -678,29 +753,27 @@ function onTableWheel(e: MouseEvent) {
 function onTableScroll(e: Event) {
     if (!e?.target) return;
 
-    // 此处可优化，因为访问e.target.scrollXX消耗性能
     const { scrollTop, scrollLeft } = e.target as HTMLElement;
-    const isYScroll = scrollTop !== virtualScroll.value.scrollTop;
-    const isXScroll = scrollLeft !== virtualScrollX.value.scrollLeft;
+    const { scrollTop: vScrollTop } = virtualScroll.value;
+    const { scrollLeft: vScrollLeft } = virtualScrollX.value;
+    const isYScroll = scrollTop !== vScrollTop;
+    const isXScroll = scrollLeft !== vScrollLeft;
+
     // 纵向滚动有变化
-    if (isYScroll) {
-        virtualScroll.value.scrollTop = scrollTop;
-    }
-    if (virtual_on.value) {
+    if (isYScroll && virtual_on.value) {
         updateVirtualScrollY(scrollTop);
     }
 
     // 横向滚动有变化
     if (isXScroll) {
-        virtualScrollX.value.scrollLeft = scrollLeft;
-    }
-    if (virtualX_on.value) {
-        updateVirtualScrollX(scrollLeft);
+        updateFixedShadow();
+        if (virtualX_on.value) {
+            updateVirtualScrollX(scrollLeft);
+        }
     }
-    const data = {
-        startIndex: virtualScroll.value.startIndex,
-        endIndex: virtualScroll.value.endIndex,
-    };
+
+    const { startIndex, endIndex } = virtualScroll.value;
+    const data = { startIndex, endIndex };
     if (isYScroll) {
         emits('scroll', e, data);
     }
@@ -724,6 +797,7 @@ function onTrMouseOver(_e: MouseEvent, row: DT) {
 function setCurrentRow(rowKey: string, option = { silent: false }) {
     if (!dataSourceCopy.value.length) return;
     currentItem.value = dataSourceCopy.value.find(it => rowKeyGen(it) === rowKey);
+    currentItemKey.value = rowKeyGen(currentItem.value);
     if (!option.silent) {
         emits('current-change', null, currentItem.value);
     }
@@ -775,16 +849,27 @@ function getTableData() {
 }
 
 defineExpose({
+    /** 初始化横向纵向虚拟滚动 */
     initVirtualScroll,
+    /** 初始化横向虚拟滚动 */
     initVirtualScrollX,
+    /** 初始化纵向虚拟滚动 */
     initVirtualScrollY,
+    /** 设置当前选中行 */
     setCurrentRow,
+    /** 设置高亮渐暗单元格 */
     setHighlightDimCell,
+    /** 设置高亮渐暗行 */
     setHighlightDimRow,
+    /** 表格排序列dataIndex */
     sortCol,
+    /** 设置排序 */
     setSorter,
+    /** 重置排序 */
     resetSorter,
+    /** 滚动至 */
     scrollTo,
+    /** 获取表格数据 */
     getTableData,
 });
 </script>

package/src/StkTable/const.ts

@@ -2,6 +2,7 @@ export const Default_Col_Width = '100';
 
 export const Default_Table_Height = 100;
 export const Default_Table_Width = 200;
+export const Default_Row_Height = 28;
 
 /** 高亮背景色 */
 export const Highlight_Color = {