stk-table-vue 0.6.5 → 0.6.7

package/README.md

@@ -8,11 +8,9 @@ Vue3 简易虚拟滚动表格。用于实时数据展示，新数据行高亮渐
 
 Vue2.7支持引入源码(**ts**)使用。
 
-[Stk Table Vue 文档](https://ja-plus.github.io/stk-table-vue/)
+[Stk Table Vue Doc](https://ja-plus.github.io/stk-table-vue/)
 
-## License
-MIT
-repo: 
+repo(求 star🌟): 
 - [Github](https://github.com/ja-plus/stk-table-vue)
 - [Gitee](https://gitee.com/japlus/stk-table-vue) 🇨🇳
 
@@ -96,521 +94,36 @@ const dataSource = [
 </script>
 
 <template>
-    <StkTable ref='stkTableRef' row-key="id" :data-source="dataSource" :columns="columns" ></StkTable>
+    <StkTable ref='stkTableRef' row-key="id" :data-source="dataSource" :columns="columns"></StkTable>
 </template>
 
 ```
 
 ### Vue2.7 Usage
-vue2.7 支持引入源码使用。依赖`less`。
-```html
-<script>
-  import { StkTable } from 'stk-table-vue/src/StkTable/index'; // include less
-</script>
-```
-Use `css`
-```html
-<script>
-  import StkTable from 'stk-table-vue/src/StkTable/StkTable.vue';
-  import 'stk-table-vue/lib/style.css';
-</script>
-```
-#### webpack TS
-##### webpack.config.js
-```js
- rules:[{ 
-  test: /\.ts$/,
-  loader:'swc-loader'
- }]
-```
-##### .swcrc
-```json
-{
-  "jsc":{
-    "parser":{
-      "syntax":"typescript",
-    }
-  }
-}
-```
-
-
+[在vue2中使用](https://ja-plus.github.io/stk-table-vue/main/start/vue2-usage.html)
 
 ## Notice
 注意，组件会改动 `props.columns` 中的对象。如果多个组件 `columns` 数组元素存在引用同一个 `StkTableColumn` 对象。则考虑赋值 `columns` 前进行深拷贝。
 
 ## API
-### StkTable Component 
-#### Props
-```ts
-export type StkProps = {
-  width?: string;
-  /** 最小表格宽度 */
-  minWidth?: string;
-  /** 表格最大宽度*/
-  maxWidth?: string;
-  /** 斑马线条纹 */
-  stripe?: boolean;
-  /** 是否使用 table-layout:fixed */
-  fixedMode?: boolean;
-  /** 是否隐藏表头 */
-  headless?: boolean;
-  /** 主题，亮、暗 */
-  theme?: 'light' | 'dark';
-  /**
-   * 行高
-   * - `props.autoRowHeight` 为 `true` 时，将表示为期望行高，用于计算。不再影响实际行高。
-   */
-  rowHeight?: number;
-  /**
-   * 是否可变行高
-   * - 设置为 `true` 时, `props.rowHeight` 将表示为期望行高，用于计算。不再影响实际行高。
-   */
-  autoRowHeight?: boolean | {
-    /** 预估行高(优先级高于rowHeight) */
-    expectedHeight?: number | ((row: DT, index: number) => number);
-  };
-  /** 是否高亮鼠标悬浮的行 */
-  rowHover?: boolean;
-  /** 是否高亮选中的行 */
-  rowActive?: boolean;
-  /** 当前行再次点击否可以取消 (rowActive=true)*/
-  rowCurrentRevokable?: boolean;
-  /** 表头行高。default = rowHeight */
-  headerRowHeight?: number | null;
-  /** 虚拟滚动 */
-  virtual?: boolean;
-  /** x轴虚拟滚动(必须设置列宽)*/
-  virtualX?: boolean;
-  /** 表格列配置 */
-  columns?: StkTableColumn<any>[];
-  /** 表格数据源 */
-  dataSource?: any[];
-  /** 行唯一键 (行唯一值不能为undefined）*/
-  rowKey?: UniqKeyProp;
-  /** 列唯一键。默认`dataIndex`*/
-  colKey?: UniqKeyProp;
-  /** 空值展示文字 */
-  emptyCellText?: string | ((option: { row: DT; col: StkTableColumn<DT> }) => string);
-  /** 暂无数据兜底高度是否撑满 */
-  noDataFull?: boolean;
-  /** 是否展示暂无数据 */
-  showNoData?: boolean;
-  /** 是否服务端排序，true则不排序数据 */
-  sortRemote?: boolean;
-  /** 表头是否溢出展示... */
-  showHeaderOverflow?: boolean;
-  /** 表体溢出是否展示... */
-  showOverflow?: boolean;
-  /** 是否增加行hover class */
-  showTrHoverClass?: boolean;
-  /** 是否高亮鼠标悬浮的单元格 */
-  cellHover?: boolean;
-  /** 是否高亮选中的单元格 */
-  cellActive?: boolean;
-  /** 单元格再次点击否可以取消选中 (cellActive=true)*/
-  selectedCellRevokable?: boolean;
-  /** 表头是否可拖动。支持回调函数。 */
-  headerDrag?:
-    | boolean
-    | {
-        /**
-         * 列交换模式
-         * - none - 不做任何事
-         * - insert - 插入(默认值)
-         * - swap - 交换
-         */
-        mode?: 'none' | 'insert' | 'swap';
-        /** 禁用拖动的列 */
-        disabled?: (col: StkTableColumn<DT>) => boolean;
-      };
-  /**
-   * 给行附加className<br>
-   * FIXME: 是否需要优化，因为不传此prop会使表格行一直执行空函数，是否有影响
-   */
-  rowClassName?: (row: any, i: number) => string;
-  /**
-   * 列宽是否可拖动(需要设置v-model:columns)<br>
-   * **不要设置**列minWidth，**必须**设置width<br>
-   * 列宽拖动时，每一列都必须要有width，且minWidth/maxWidth不生效。table width会变为"fit-content"。
-   * - 会自动更新props.columns中的with属性
-   */
-  colResizable?: boolean | ColResizableConfig;
-  /** 可拖动至最小的列宽 */
-  colMinWidth?: number;
-  /**
-   * 单元格分割线。
-   * 默认横竖都有
-   * "h" - 仅展示横线
-   * "v" - 仅展示竖线
-   * "body-v" - 仅表体展示竖线
-   */
-  bordered?: boolean | 'h' | 'v' | 'body-v';
-  /**
-   * 自动重新计算虚拟滚动高度宽度。默认true
-   * [非响应式]
-   * 传入方法表示resize后的回调
-   */
-  autoResize?: boolean | (() => void);
-  /** 是否展示固定列阴影。为节省性能，默认false。 */
-  fixedColShadow?: boolean;
-  /** 优化vue2 滚动 */
-  optimizeVue2Scroll?: boolean;
-  /** 排序配置 */
-  sortConfig?: {
-    /** 空值是否排最下面 */
-    emptyToBottom: boolean,
-    /** 默认排序（1.初始化时触发 2.排序方向为null时触发) */
-    defaultSort?: {
-        dataIndex: keyof T;
-        order: Order;
-    };
-    /**
-     * string排序是否使用 String.prototype.localCompare
-     * 默认true (历史设计问题，为了兼容，默认true)
-     */
-    stringLocaleCompare?: boolean;
-  },
-  /** 隐藏头部鼠标悬浮title。可传入dataIndex数组 */
-  hideHeaderTitle?: boolean | string[];
-  /** 高亮配置 */
-  highlightConfig?: {
-    /** 高亮持续时间(s) */
-    duration?: number;
-    /** 高亮帧率*/
-    fps?: number;
-  };
-  /** 序号列配置 */
-  seqConfig?: {
-    /** 序号列起始下标 用于适配分页 */
-    startIndex?: number;
-  };
-  /** 展开行配置 */
-  expandConfig?: {
-    height?: number;
-  };
-  /** 行拖动配置 */
-  dragRowConfig?: {
-    mode?: 'none' | 'insert' | 'swap';
-  };
-  /**
-   * 固定头，固定列实现方式。
-   * [非响应式]
-   * relative：固定列只能放在props.columns的两侧。
-   * - 如果列宽会变动则谨慎使用。
-   * - 多级表头固定列慎用
-   * 
-   * 低版本浏览器只能为'relative', 
-   */
-  cellFixedMode?: 'sticky' | 'relative';
-  /**
-   * 是否平滑滚动
-   * - default: chrome < 85 ? true : false
-   * - false: 使用 wheel 事件滚动。为了防止滚动过快导致白屏。
-   * - true: 不使用 wheel 事件滚动。滚轮滚动时更加平滑。滚动过快时会白屏。
-   */
-  smoothScroll?: boolean;
-};
-```
-
-#### Emits
-```js
-  {
-    /**
-     * 排序变更触发。defaultSort.dataIndex 找不到时，col 将返回null。
-     * ```(col: StkTableColumn<DT> | null, order: Order, data: DT[], sortConfig: SortConfig<DT>)```
-     */
-    (e: 'sort-change', col: StkTableColumn<DT> | null, order: Order, data: DT[], sortConfig: SortConfig): void;
-    /**
-     * 一行点击事件
-     * ```(ev: MouseEvent, row: DT)```
-     */
-    (e: 'row-click', ev: MouseEvent, row: DT): void;
-    /**
-     * 选中一行触发。ev返回null表示不是点击事件触发的
-     * ```(ev: MouseEvent | null, row: DT | undefined,, data: { select: boolean })```
-     */
-    (e: 'current-change', ev: MouseEvent | null, row: DT | undefined,, data: { select: boolean }): void;
-    /**
-     * 选中单元格触发。ev返回null表示不是点击事件触发的
-     * ```(ev: MouseEvent | null, data: { select: boolean; row: DT | undefined; col: StkTableColumn<DT> | null })```
-     */
-    (e: 'cell-selected', ev: MouseEvent | null, data: { select: boolean; row: DT | undefined; col: StkTableColumn<DT> | null }): 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, row: DT, col: StkTableColumn<DT>)```
-     */
-    (e: 'cell-mouseenter', ev: MouseEvent, row: DT, col: StkTableColumn<DT>): void;
-    /**
-     * 单元格鼠标移出事件
-     * ```(ev: MouseEvent, row: DT, col: StkTableColumn<DT>)```
-     */
-    (e: 'cell-mouseleave', ev: MouseEvent, row: DT, col: StkTableColumn<DT>): void;
-    /**
-     * 单元格悬浮事件
-     * ```(ev: MouseEvent, row: DT, col: StkTableColumn<DT>)```
-     */
-    (e: 'cell-mouseover', 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
-     * ```(targetColKey: string)```
-     */
-    (e: 'th-drop', targetColKey: string): void;
-    /**
-     * 行拖动事件
-     * ```(dragStartKey: string, targetRowKey: string)```
-     */
-    (e: 'row-order-change', dragStartKey: string, targetRowKey: string): void;
-    /**
-     * 列宽变动时触发
-     */
-    (e: 'col-resize', cols: StkTableColumn<DT>): void;
-    /**
-     * 展开行触发
-     * ```( data: { expanded: boolean; row: DT; col: StkTableColumn<DT> })```
-     */
-    (e: 'toggle-row-expand', data: { expanded: boolean; row: DT; col: StkTableColumn<DT> | null }): void;
-    /** 
-     * v-model:columns col resize 时更新宽度
-     */
-    (e: 'update:columns', cols: StkTableColumn<DT>[]): void;
-}
-```
+### Props
+[Props 表格配置](https://ja-plus.github.io/stk-table-vue/main/api/table-props.html)
 
-#### Slots
+### Emits
+[Emits 事件](https://ja-plus.github.io/stk-table-vue/main/api/emits.html)
 
-| slots | props | describe |
-| ---- | ---- | ---- |
-| `tableHeader` | `{col}` | table header slot |
-| `empty` | -- | no data status |
-| `expand` |  `{col, row}` | expand row |
+### Slots
+[Slots 插槽](https://ja-plus.github.io/stk-table-vue/main/api/slots.html)
 
-
-#### Expose
-```js
-defineExpose({
-  /** 初始化横向纵向虚拟滚动 */
-  initVirtualScroll,
-  /** 初始化横向虚拟滚动 */
-  initVirtualScrollX,
-  /** 初始化纵向虚拟滚动 */
-  initVirtualScrollY,
-  /** 设置当前选中行 */
-  setCurrentRow,
-  /** 设置当前选中单元格 (props.cellActive=true)*/
-  setSelectedCell,
-  /** 设置高亮渐暗单元格 */
-  setHighlightDimCell,
-  /** 设置高亮渐暗行 */
-  setHighlightDimRow,
-  /** 表格排序列dataIndex */
-  sortCol,
-  /** 获取当前排序状态 */
-  getSortColumns,
-  /** 设置排序 */
-  setSorter,
-  /** 重置排序 */
-  resetSorter,
-  /** 滚动至 */
-  scrollTo,
-  /** 获取表格数据 */
-  getTableData,
-  /** 设置展开行*/
-  setRowExpand,
-  /** 设置指定行的 auto-row-height 保存的高度，如果行高度有变化，则可以调用此方法清除或变更行高 */
-  setAutoHeight,
-  /** 清除所有 auto-row-height 保存的高度 */
-  clearAllAutoHeight,
-});
-```
+### Expose
+[Expose 实例方法](https://ja-plus.github.io/stk-table-vue/main/api/expose.html)
 
 ### StkTableColumn 列配置
-``` ts
-type Sorter<T> = boolean | ((data: T[], option: { order: Order; column: any }) => T[]);
-export type StkTableColumn<T extends Record<string, any>> = {
-   /**
-     * 用于区分相同dataIndex 的列。
-     * 需要自行配置colKey="(col: StkTableColumn<any>) => col.key ?? col.dataIndex"
-     */
-    key?: any;
-    /**
-     * 列类型
-     * - seq 序号列
-     * - expand 展开列
-     * - dragRow 拖拽列(使用sktTableRef.getTableData 获取改变后的顺序)
-     */
-    type?: 'seq' | 'expand' | 'dragRow';
-    /** 取值id */
-    dataIndex: keyof T & string;
-    /** 表头文字 */
-    title?: string;
-    /** 列内容对齐方式 */
-    align?: 'right' | 'left' | 'center';
-    /** 表头内容对齐方式 */
-    headerAlign?: 'right' | 'left' | 'center';
-    /** 筛选 */
-    sorter?: Sorter<T>;
-    /** 列宽。横向虚拟滚动时必须设置。 */
-    width?: string | number;
-    /** 最小列宽。非x虚拟滚动生效。 */
-    minWidth?: string | number;
-    /** 最大列宽。非x虚拟滚动生效。 */
-    maxWidth?: string | number;
-    /**th class */
-    headerClassName?: string;
-    /** td class */
-    className?: string;
-    /** 排序字段。default: dataIndex */
-    sortField?: keyof T;
-    /** 排序方式。按数字/字符串 */
-    sortType?: 'number' | 'string';
-    /** 固定列 */
-    fixed?: 'left' | 'right' | null;
-    /** private */ rowSpan?: number;
-    /** private */ colSpan?: number;
-    /**
-     * 自定义 td 渲染内容。
-     *
-     * 组件prop入参:
-     * @param props.row 一行的记录。
-     * @param props.col 列配置
-     * @param props.cellValue row[col.dataIndex] 的值
-     * @param props.rowIndex 行索引
-     * @param props.colIndex 列索引
-     */
-    customCell?: Component<CustomCellProps<T>> | string;
-    /**
-     * 自定义 th 渲染内容
-     *
-     * 组件prop入参:
-     * @param props.col 列配置
-     * @param props.rowIndex 行索引
-     * @param props.colIndex 列索引
-     */
-    customHeaderCell?: Component<CustomHeaderCellProps<T>> | string;
-    /** 二级表头 */
-    children?: StkTableColumn<T>[];
-    /** private 父节点引用 */
-    __PARENT__?: StkTableColumn<T> | null;
-    /** private 保存计算的宽度。横向虚拟滚动用。 */
-    __WIDTH__?: number;
-};
-```
-
-
-### StkTableColumn.SortConfig
-```ts
-/** 排序配置 */
-export type SortConfig<T extends Record<string, any>> = {
-    /** 空值始终排在列表末尾 */
-    emptyToBottom?: boolean;
-    /**
-     * 默认排序（1.初始化时触发 2.排序方向为null时触发)
-     * 类似onMounted时，调用setSorter点了下表头。
-     */
-    defaultSort?: {
-        dataIndex: keyof T;
-        order: Order;
-        /** 是否禁止触发sort-change事件。默认false，表示触发事件。 */
-        silent?: boolean;
-    };
-    /**
-     * string排序是否使用 String.prototype.localCompare
-     * 默认true ($*$应该false)
-     */
-    stringLocaleCompare?: boolean;
-};
-```
+[StkTableColumn 列配置](https://ja-plus.github.io/stk-table-vue/main/api/stk-table-column.html)
 
 ### setHighlightDimCell & setHighlightDimRow
-#### setHighlightDimCell
-```ts
-  setHighlightDimCell(
-    rowKeyValues: UniqKey[],
-      option: {
-        method?: 'css' | 'animation' | 'js';
-        /** @deprecated use method */
-        useCss?: boolean;
-        className?: string;
-        keyframe?: Parameters<Animatable['animate']>['0'];
-        duration?: number;
-    } = {},
-    )
-```
-#### setHighlightDimRow
-```ts
-  setHighlightDimRow(
-    rowKeyValues: UniqKey[],
-      option: {
-        method?: 'css' | 'animation' | 'js';  
-        /** @deprecated use method */
-        useCss?: boolean;
-        className?: string;
-        keyframe?: Parameters<Animatable['animate']>['0'];
-        duration?: number;
-    }
-  )
-```
-#### option
-| key |value| default |desc |
-| ---- | ---- | ---- | ---- |
-| method | `css` `animation` `js` | `animation` | 设置高亮方式。 |
-| ~~useCss~~  `deprecated` | `boolean`| false | ~~是否使用css~~ |
-| className | `string` | `highlight-row`/`highlight-cell` | 自定义 css 动画。method == 'css' 生效 |
-| keyframe | `Parameters<Animatable['animate']>['0']` | ... | 自定义高亮动画。method == 'animation' 生效。 |
-| duration | `number` | 2000 | 设置高亮动画持续时间ms。 method='css'状态下，用于移除class，如果传入了className则需要与自定义的动画时间一致。|
+[高亮使用文档](https://ja-plus.github.io/stk-table-vue/main/api/expose.html#sethighlightdimcell)
 
-##### option.method
-| `option.method`| desc |
-| ---- | ---- |
-| animation | animation api 实现高亮。(default) |
-| css | css @keyframes 实现高亮。 |
-| js | js 循环计算颜色实现高亮。 |
 
 ### Example
 ```vue
@@ -687,32 +200,12 @@ export type SortConfig<T extends Record<string, any>> = {
 ### Filter过滤器
 * 暂不支持。用户可以自行通过 `customHeaderCell` 实现功能。
 
-## Performance optimization
-### highlight
-* 配置 `props.highlightConfig.fps` 指定高亮帧率。降低帧率有利于性能。
-### relative fixed
-* 配置 `props.cellFixedMode` 为 `relative` 时，将使用相对定位实现固定列与固定表头，相较于`sticky`的实现，渲染合成层更少。
-* 问题：若开启了纵向虚拟滚动，不开启横向虚拟滚动，且不设置某些列宽时。如果纵向滚动导致某些列宽变化，则会导致右侧固定列计算错误。
-### tr 分层
-* 通过css选择器将 stk-table tbody tr 配置 `transform:translateZ(0)` 对每行 tr 进行分层。对性能有帮助。
-  - 提升合成层可能导致黑底红字字体颜色发生变化。
-  - 以下情况尝试开启此功能。
-    - 在 `customCell` 较多且复杂时。
-    - 大量 highlight 动画时。
-### props.autoResize
-* 手动设置为 `props.autoResize=false`。可取消监听的性能消耗。适用于宽度高度不变的表格。
-
-### props.smoothScroll
-* 高版本浏览器滚动默认有惯性。会频繁触发 `onscroll` 回调。因此 chrome > 85 默认关闭，使用 `onwheel` 代理滚动，且可防止滚动白屏。
-
 ## Tips
 ### props.fixedMode
 * **低版本浏览器** 需要设置 `props.width`（default: width=fit-content不生效）。否则列宽不设宽度会变为0。
 
-
 ## Other
 * `$*$` 兼容注释
 
-
 ### Planed removal APi
 * `setHighlightDimRow` 中的 `method="js"`。观察animation Api 是否足够满足使用场景。若足够满足计划在后期移除，并且可以移除 `d3-interpolate` 依赖。

package/lib/src/StkTable/StkTable.vue.d.ts

@@ -26,6 +26,7 @@ declare function setSelectedCell(row?: DT, col?: StkTableColumn<DT>, option?: {
  * @param option.sort 是否触发排序-默认true
  * @param option.silent 是否禁止触发回调-默认true
  * @param option.force 是否触发排序-默认true
+ * @return 表格数据
  */
 declare function setSorter(colKey: string, order: Order, option?: {
     sortOption?: SortOption<DT>;
@@ -42,7 +43,10 @@ declare function resetSorter(): void;
 declare function scrollTo(top?: number | null, left?: number | null): void;
 /** get current table data */
 declare function getTableData(): any[];
-/** get current sort info */
+/**
+ * get current sort info
+ * @return {{key:string,order:Order}[]}
+ */
 declare function getSortColumns(): {
     key: string | number | symbol | undefined;
     order: "desc" | "asc";
@@ -492,6 +496,7 @@ declare const _default: __VLS_WithTemplateSlots<import('vue').DefineComponent<{
         col: any;
     }): any;
     empty?(_: {}): any;
+    customBottom?(_: {}): any;
 }>;
 export default _default;
 type __VLS_WithTemplateSlots<T, S> = T & {

package/lib/src/StkTable/index.d.ts

@@ -1,3 +1,3 @@
 export { default as StkTable } from './StkTable.vue';
-export { tableSort, insertToOrderedArray, strCompare } from './utils';
+export { tableSort, insertToOrderedArray, strCompare, binarySearch } from './utils';
 export type { StkTableColumn } from './types/index';

package/lib/src/StkTable/utils/index.d.ts

@@ -14,6 +14,12 @@ export declare function isEmptyValue(val: any, isNumber?: boolean): boolean;
  * @return targetArray 的浅拷贝
  */
 export declare function insertToOrderedArray<T extends object>(sortState: SortState<T>, newItem: T, targetArray: T[], sortConfig?: SortConfig<T>): T[];
+/**
+ * 二分查找
+ *  @param searchArray 查找数组
+ *  @param compareCallback 比较函数，返回 -1|0|1
+ */
+export declare function binarySearch(searchArray: any[], compareCallback: (midIndex: number) => number): number;
 /**
  * 字符串比较
  * @param a
@@ -21,7 +27,7 @@ export declare function insertToOrderedArray<T extends object>(sortState: SortSt
  * @param type 类型
  * @param isNumber 是否是数字类型
  * @param localeCompare 是否 使用Array.prototyshpe.localeCompare
- * @return {-1|0|1}
+ * @return {number} <0: a < b, 0: a = b, >0: a > b
  */
 export declare function strCompare(a: string, b: string, isNumber: boolean, localeCompare?: boolean): number;
 /**

package/lib/stk-table-vue.js

@@ -59,7 +59,6 @@ function insertToOrderedArray(sortState, newItem, targetArray, sortConfig = {})
   sortConfig = { emptyToBottom: false, ...sortConfig };
   let { sortType } = sortState;
   if (!sortType) sortType = typeof newItem[dataIndex];
-  const isNumber = sortType === "number";
   const data = [...targetArray];
   if (!order || !data.length) {
     data.unshift(newItem);
@@ -68,26 +67,32 @@ function insertToOrderedArray(sortState, newItem, targetArray, sortConfig = {})
   if (sortConfig.emptyToBottom && isEmptyValue(newItem)) {
     data.push(newItem);
   }
-  let sIndex = 0;
-  let eIndex = data.length - 1;
+  const isNumber = sortType === "number";
   const targetVal = newItem[dataIndex];
-  while (sIndex <= eIndex) {
-    const midIndex = Math.floor((sIndex + eIndex) / 2);
+  const sIndex = binarySearch(data, (midIndex) => {
     const midVal = data[midIndex][dataIndex];
     const compareRes = strCompare(midVal, targetVal, isNumber, sortConfig.stringLocaleCompare);
+    return order === "asc" ? compareRes : -compareRes;
+  });
+  data.splice(sIndex, 0, newItem);
+  return data;
+}
+function binarySearch(searchArray, compareCallback) {
+  let sIndex = 0;
+  let eIndex = searchArray.length - 1;
+  while (sIndex <= eIndex) {
+    const midIndex = Math.floor((sIndex + eIndex) / 2);
+    const compareRes = compareCallback(midIndex);
     if (compareRes === 0) {
       sIndex = midIndex;
       break;
-    } else if (compareRes === -1) {
-      if (order === "asc") sIndex = midIndex + 1;
-      else eIndex = midIndex - 1;
+    } else if (compareRes < 0) {
+      sIndex = midIndex + 1;
     } else {
-      if (order === "asc") eIndex = midIndex - 1;
-      else sIndex = midIndex + 1;
+      eIndex = midIndex - 1;
     }
   }
-  data.splice(sIndex, 0, newItem);
-  return data;
+  return sIndex;
 }
 function strCompare(a, b, isNumber, localeCompare = false) {
   let _a = a;
@@ -2343,13 +2348,15 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
           renderSlot(_ctx.$slots, "empty", {}, () => [
             _cache[7] || (_cache[7] = createTextVNode("暂无数据"))
           ])
-        ], 2)) : createCommentVNode("", true)
+        ], 2)) : createCommentVNode("", true),
+        renderSlot(_ctx.$slots, "customBottom")
       ], 38);
     };
   }
 });
 export {
   _sfc_main as StkTable,
+  binarySearch,
   insertToOrderedArray,
   strCompare,
   tableSort

package/lib/style.css

@@ -6,6 +6,7 @@
 .stk-table{
   --row-height:28px;
   --header-row-height:var(--row-height);
+  --cell-padding-y:0;
   --cell-padding-x:8px;
   --resize-handle-width:4px;
   --border-color:#e8e8f4;
@@ -103,13 +104,13 @@
 .stk-table.stripe.vt-on .stk-tbody-main tr:nth-child(odd){
   background-color:var(--stripe-bgc);
 }
-.stk-table.stripe.row-hover .stk-table-main .stk-tbody-main tr:hover{
+.stk-table.stripe.row-hover .stk-tbody-main tr:hover{
   background-color:var(--tr-hover-bgc);
 }
-.stk-table.stripe.row-active .stk-table-main .stk-tbody-main tr.active{
+.stk-table.stripe.row-active .stk-tbody-main tr.active{
   background-color:var(--tr-active-bgc);
 }
-.stk-table.row-hover .stk-table-main .stk-tbody-main tr:hover{
+.stk-table.row-hover .stk-tbody-main tr:hover{
   background-color:var(--tr-hover-bgc);
 }
 .stk-table.row-active .stk-tbody-main tr.active{
@@ -177,7 +178,7 @@
 .stk-table td{
   font-size:14px;
   box-sizing:border-box;
-  padding:0 var(--cell-padding-x);
+  padding:var(--cell-padding-y) var(--cell-padding-x);
 }
 .stk-table th{
   color:var(--th-color);
@@ -260,7 +261,7 @@
 .stk-table .expand-cell{
   cursor:pointer;
 }
-.stk-table .expand-cell .table-cell-wrapper.expanded-cell-wrapper::before{
+.stk-table .expand-cell .expanded-cell-wrapper::before{
   content:'';
   display:inline-block;
   margin:0 2px;
@@ -271,7 +272,7 @@
   border-bottom:4px solid transparent;
   transition:transform 0.2s ease;
 }
-.stk-table .expand-cell .table-cell-wrapper.expanded-cell-wrapper > span{
+.stk-table .expand-cell .expanded-cell-wrapper > span{
   margin-left:var(--cell-padding-x);
 }
 .stk-table .expand-cell.expanded .table-cell-wrapper::before{

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "stk-table-vue",
-  "version": "0.6.5",
+  "version": "0.6.7",
   "description": "Simple realtime virtual table for vue3 and vue2.7",
   "main": "./lib/stk-table-vue.js",
   "types": "./lib/src/StkTable/index.d.ts",

package/src/StkTable/StkTable.vue

@@ -227,6 +227,7 @@
         <div v-if="(!dataSourceCopy || !dataSourceCopy.length) && showNoData" class="stk-table-no-data" :class="{ 'no-data-full': noDataFull }">
             <slot name="empty">暂无数据</slot>
         </div>
+        <slot name="customBottom"></slot>
     </div>
 </template>
 
@@ -1288,6 +1289,7 @@ function setSelectedCell(row?: DT, col?: StkTableColumn<DT>, option = { silent:
  * @param option.sort 是否触发排序-默认true
  * @param option.silent 是否禁止触发回调-默认true
  * @param option.force 是否触发排序-默认true
+ * @return 表格数据
  */
 function setSorter(colKey: string, order: Order, option: { sortOption?: SortOption<DT>; force?: boolean; silent?: boolean; sort?: boolean } = {}) {
     const newOption = { silent: true, sortOption: null, sort: true, ...option };
@@ -1325,7 +1327,10 @@ function getTableData() {
     return toRaw(dataSourceCopy.value);
 }
 
-/** get current sort info */
+/**
+ * get current sort info
+ * @return {{key:string,order:Order}[]}
+ */
 function getSortColumns() {
     const sortOrder = sortSwitchOrder[sortOrderIndex.value];
     if (!sortOrder) return [];

package/src/StkTable/index.ts

@@ -1,4 +1,4 @@
 export { default as StkTable } from './StkTable.vue';
-export { tableSort, insertToOrderedArray, strCompare } from './utils';
+export { tableSort, insertToOrderedArray, strCompare, binarySearch } from './utils';
 export type { StkTableColumn } from './types/index';
 import './style.less';

package/src/StkTable/style.less

@@ -9,6 +9,7 @@
     /* contain: strict;*/
     --row-height: 28px;
     --header-row-height: var(--row-height);
+    --cell-padding-y: 0;
     --cell-padding-x: 8px;
     --resize-handle-width: 4px;
     --border-color: #e8e8f4;
@@ -157,18 +158,18 @@
             background-color: var(--stripe-bgc);
         }
 
-        &.row-hover .stk-table-main .stk-tbody-main tr:hover {
+        &.row-hover .stk-tbody-main tr:hover {
             background-color: var(--tr-hover-bgc);
         }
 
-        &.row-active .stk-table-main .stk-tbody-main tr.active {
+        &.row-active .stk-tbody-main tr.active {
             background-color: var(--tr-active-bgc);
         }
     }
 
 
     /** more weight for custom row background*/
-    &.row-hover .stk-table-main .stk-tbody-main tr:hover {
+    &.row-hover .stk-tbody-main tr:hover {
         background-color: var(--tr-hover-bgc);
     }
 
@@ -271,7 +272,7 @@
     td {
         font-size: 14px;
         box-sizing: border-box;
-        padding: 0 var(--cell-padding-x);
+        padding: var(--cell-padding-y) var(--cell-padding-x);
     }
 
     th {
@@ -386,8 +387,7 @@
     .expand-cell {
         cursor: pointer;
 
-        .table-cell-wrapper {
-            &.expanded-cell-wrapper {
+            .expanded-cell-wrapper {
                 &::before {
                     content: '';
                     display: inline-block;
@@ -404,7 +404,6 @@
                     margin-left: var(--cell-padding-x)
                 }
             }
-        }
 
         &.expanded {
             .table-cell-wrapper::before {

package/src/StkTable/utils/index.ts

@@ -26,7 +26,6 @@ export function insertToOrderedArray<T extends object>(sortState: SortState<T>,
     sortConfig = { emptyToBottom: false, ...sortConfig };
     let { sortType } = sortState;
     if (!sortType) sortType = typeof newItem[dataIndex] as 'number' | 'string';
-    const isNumber = sortType === 'number';
     const data = [...targetArray];
 
     if (!order || !data.length) {
@@ -40,31 +39,43 @@ export function insertToOrderedArray<T extends object>(sortState: SortState<T>,
         data.push(newItem);
     }
 
+    const isNumber = sortType === 'number';
+
     // 二分插入
-    let sIndex = 0;
-    let eIndex = data.length - 1;
     const targetVal: any = newItem[dataIndex];
-    while (sIndex <= eIndex) {
-        // console.log(sIndex, eIndex);
-        const midIndex = Math.floor((sIndex + eIndex) / 2);
+    const sIndex = binarySearch(data, midIndex => {
         const midVal: any = data[midIndex][dataIndex];
         const compareRes = strCompare(midVal, targetVal, isNumber, sortConfig.stringLocaleCompare);
+        return order === 'asc' ? compareRes : -compareRes;
+    });
+    data.splice(sIndex, 0, newItem);
+    return data;
+}
+
+/**
+ * 二分查找
+ *  @param searchArray 查找数组
+ *  @param compareCallback 比较函数，返回 -1|0|1
+ */
+export function binarySearch(searchArray: any[], compareCallback: (midIndex: number) => number) {
+    let sIndex = 0;
+    let eIndex = searchArray.length - 1;
+    while (sIndex <= eIndex) {
+        const midIndex = Math.floor((sIndex + eIndex) / 2);
+        const compareRes = compareCallback(midIndex);
         if (compareRes === 0) {
             //midVal == targetVal
             sIndex = midIndex;
             break;
-        } else if (compareRes === -1) {
+        } else if (compareRes < 0) {
             // midVal < targetVal
-            if (order === 'asc') sIndex = midIndex + 1;
-            else eIndex = midIndex - 1;
+            sIndex = midIndex + 1;
         } else {
             //midVal > targetVal
-            if (order === 'asc') eIndex = midIndex - 1;
-            else sIndex = midIndex + 1;
+            eIndex = midIndex - 1;
         }
     }
-    data.splice(sIndex, 0, newItem);
-    return data;
+    return sIndex;
 }
 /**
  * 字符串比较
@@ -73,7 +84,7 @@ export function insertToOrderedArray<T extends object>(sortState: SortState<T>,
  * @param type 类型
  * @param isNumber 是否是数字类型
  * @param localeCompare 是否 使用Array.prototyshpe.localeCompare
- * @return {-1|0|1}
+ * @return {number} <0: a < b, 0: a = b, >0: a > b
  */
 export function strCompare(a: string, b: string, isNumber: boolean, localeCompare = false): number {
     let _a: number | string = a;