stk-table-vue 0.2.0 → 0.2.1

package/README.md

@@ -1,37 +1,41 @@
 # StkTable (Sticky Table)
 
 Vue3 简易虚拟滚动表格。用于实时数据展示，新数据行高亮渐暗动效。
-js体积(未压缩46kb)
 
+Vue2.7支持引入源码(**ts**)使用。
+
+## Bug TODO:
+* [] props.dataSource 为 shallowRef 时，高亮行不生效。(2024.02.21)
 ## Feature TODO:
 * [x] 高亮行，单元格。
-* [x] 横向虚拟滚动。
+* [x] 虚拟滚动。
+  - [x] 纵向。
+  - [x] 横向（必须设置列宽）。
 * [x] 列固定。
+  - [x] 固定列阴影。
+    - [x] 多级表头固定列阴影。
+    - [] sticky column 动态计算阴影位置。
+* [] 列筛选。
+* [x] 斑马纹。
+  - [] 虚拟滚动斑马纹。
 * [x] 表头拖动更改顺序。
-* [x] 表头列宽拖动调整宽度。
+* [x] 表头拖动调整列宽。
 * [x] 排序
-  - [x] 基本表头点击排序
+  - [x] 基本表头点击排序。
   - [] 支持配置 `null` | `undefined` 永远排最后。
   - [] 支持配置 string 使用 `String.prototype.localCompare` 排序。
 * 多级表头。
   - [x] 支持最多`2级`表头。
-  - [x] 支持更多级表头
-  - [] 多级表头border-left 问题。
-  - [] 多级表头固定列横向滚动
+  - [x] 支持更多级表头。
   - [] 横向虚拟滚动。
 * [x] 支持table-layout: fixed 配置。
 * 鼠标悬浮在表格上，键盘滚动虚拟表格。
   - [x] 键盘 `ArrowUp`/`ArrowDown`/`ArrowLeft`/`ArrowRight` 按键支持。
   - [x] 键盘 `PageUp`/ `PageDown` 按键支持。
-* [x] 斑马纹。
-* [x] 列固定阴影。
-  - [] 多级表头固定列阴影。
-  - [] sticky column 动态计算阴影位置。
 * [] 不传row-key 时，自动按序号生成id。
-* [] 列筛选。
 * [] 非虚拟滚动时，大数据分批加载。
-* [x] vue2支持。
-  - `props.optimizeVue2Scroll` 优化vue2虚拟滚动流畅度。
+* [x] vue2.7支持（引入源码使用）。
+  - [x] `props.optimizeVue2Scroll` 优化vue2虚拟滚动流畅度。
 
 
 ## Usage
@@ -53,13 +57,39 @@ stkTable.value.setHighlightDimCell(rowId, colId) // highlight cell
 
 ```
 
-### Vue2 Usage
-vue2 支持源码引入使用。依赖`less`。
+### Vue2.7 Usage
+vue2.7 支持引入源码使用。依赖`less`。
+```html
+<script>
+  import { StkTable } from 'stk-table-vue/src/StkTable/index';
+</script>
+```
+不要less的话
 ```html
 <script>
-  import { StkTable } from 'stk-table-vue/src/StkTable/index'
+  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",
+    }
+  }
+}
+```
+
 
 
 ## Notice
@@ -115,6 +145,8 @@ export type StkProps = {
   showTrHoverClass?: boolean;
   /** 表头是否可拖动 */
   headerDrag?: boolean;
+  /** 表头是否可拖动。支持回调函数。 */
+  headerDrag?: boolean | ((col: StkTableColumn<DT>) => boolean);
   /**
    * 给行附加className<br>
    * FIXME: 是否需要优化，因为不传此prop会使表格行一直执行空函数，是否有影响
@@ -238,6 +270,8 @@ defineExpose({
   setHighlightDimRow,
   /** 表格排序列dataIndex */
   sortCol,
+  /** 获取当前排序状态 */
+  getSortColumns,
   /** 设置排序 */
   setSorter,
   /** 重置排序 */