stk-table-vue 1.0.0-beta.5 → 1.0.1

package/README.md

@@ -1,173 +1,174 @@
-<p align="center">
-    <a href="https://ja-plus.github.io/stk-table-vue/">
-        <img src="./docs-src/public/assets/logo.svg" width="152">
-    </a>
-    <h3 align='center'>Stk Table Vue</h3>
-    <p align="center">
-        <a href="https://www.npmjs.com/package/stk-table-vue"><img src="https://img.shields.io/npm/v/stk-table-vue"></a>
-        <a href="https://www.npmjs.com/package/stk-table-vue"><img src="https://img.shields.io/npm/dw/stk-table-vue"></a>
-        <a href="https://github.com/ja-plus/stk-table-vue/stargazers"><img src="https://img.shields.io/github/stars/ja-plus/stk-table-vue.svg"></a>
-        <a href="https://raw.githubusercontent.com/ja-plus/stk-table-vue/master/LICENSE"><img src="https://img.shields.io/npm/l/stk-table-vue"></a>
-        <a href="https://github.com/ja-plus/stk-table-vue"><img src="https://img.shields.io/npm/types/stk-table-vue"></a>
-    </p>
-</p>
-
-Stk Table Vue(Sticky Table) is a high-performance virtual list component based on Vue.
-
-Smooth performance with tens of thousands of rows
-
-Used for real-time data display, with data highlighting and dynamic effects.
-
-Support Vue3 and Vue2.7
-
-
-## Documentation
-### [Stk Table Vue Official](https://ja-plus.github.io/stk-table-vue/)
-
-
-## Repo: 
-- [Github](https://github.com/ja-plus/stk-table-vue)
-- [Gitee](https://gitee.com/japlus/stk-table-vue)
-
-## Demo
-[<span style="font-size: 16px;font-weight: bold;">Online Demo in stackblitz</span>](https://stackblitz.com/edit/vitejs-vite-ad91hh?file=src%2FDemo%2Findex.vue)
-
-## Usage
-> npm install stk-table-vue
-
-```html
-<script setup>
-import { StkTable } from 'stk-table-vue'
-import { ref, useTemplateRef } from 'vue'
-const stkTableRef = ref<InstanceType<typeof StkTable>>();
-// or Vue 3.5 useTemplateRef
-const stkTableRef = useTemplateRef('stkTableRef');
-
-// highlight row
-stkTableRef.value.setHighlightDimRow([rowKey], {
-  method: 'css' | 'animation', // default animation
-  className: 'custom-class-name', // for method 'css'
-  keyframe: [{ backgroundColor: '#aaa' }, { backgroundColor: '#222' }], // same as https://developer.mozilla.org/zh-CN/docs/Web/API/Web_Animations_API/Keyframe_Formats
-  duration: 2000,
-});
-// highlight cell
-stkTableRef.value.setHighlightDimCell(rowKey, colDataIndex, {
-  method: 'css' | 'animation',
-  className: 'custom-class-name', // for method 'css'
-  keyframe: [{ backgroundColor: '#aaa' }, { backgroundColor: '#222' }], // for method 'animation'
-  duration: 2000,
-});
-
-const columns = [
-  {title: 'name', dataIndex: 'name'},
-  {title: 'age', dataIndex: 'age'},
-  {title: 'address', dataIndex: 'address'},
-];
-
-const dataSource = [
-  {id: 1, name: 'John', age: 32, address: 'New York'},
-  {id: 2, name: 'Jim', age: 42, address: 'London'},
-  {id: 3, name: 'Joe', age: 52, address: 'Tokyo'},
-  {id: 4, name: 'Jack', age: 62, address: 'Sydney'},
-  {id: 5, name: 'Jill', age: 72, address: 'Paris'},
-]
-
-</script>
-
-<template>
-    <StkTable ref='stkTableRef' row-key="id" :data-source="dataSource" :columns="columns"></StkTable>
-</template>
-
-```
-
-### Vue2.7 Usage
-[Vue2.7 Usage](https://ja-plus.github.io/stk-table-vue/main/start/vue2-usage.html)
-
-## API
-* [Props](https://ja-plus.github.io/stk-table-vue/main/api/table-props.html)
-
-* [Emits](https://ja-plus.github.io/stk-table-vue/main/api/emits.html)
-
-* [Slots](https://ja-plus.github.io/stk-table-vue/main/api/slots.html)
-
-* [Expose](https://ja-plus.github.io/stk-table-vue/main/api/expose.html)
-
-* [StkTableColumn: Define column type](https://ja-plus.github.io/stk-table-vue/main/api/stk-table-column.html)
-
-* [Highlight: setHighlightDimCell & setHighlightDimRow](https://ja-plus.github.io/stk-table-vue/main/api/expose.html#sethighlightdimcell)
-
-
-### Example
-```vue
-<template>
- <StkTable
-    ref="stkTable"
-    row-key="name"
-    v-model:columns="columns"
-    :style="{height:props.height}"
-    theme='dark'
-    height='200px'
-    bordered="h"
-    :row-height="28"
-    :show-overflow="false"
-    :show-header-overflow="false"
-    :sort-remote="false"
-    col-resizable
-    header-drag
-    virtual
-    virtual-x
-    no-data-full
-    col-resizable
-    auto-resize
-    fixed-col-shadow
-    :col-min-width="10"
-    :headless="false"
-    :data-source="dataSource"
-    @current-change="onCurrentChange"
-    @row-menu="onRowMenu"
-    @header-row-menu="onHeaderRowMenu"
-    @row-click="onRowClick"
-    @row-dblclick="onRowDblclick"
-    @sort-change="handleSortChange"
-    @cell-click="onCellClick"
-    @header-cell-click="onHeaderCellClick"
-    @scroll="onTableScroll"
-    @scroll-x="onTableScrollX"
-    @col-order-change="onColOrderChange"
-  />
-</template>
-<script setup>
-  import { h, defineComponent } from 'vue';
-  const columns = [
-    {
-      title: 'Name',
-      dataIndex: 'name',
-      fixed: 'left',
-      width: '200px',
-      headerClassName: 'my-th',
-      className: 'my-td',
-      sorter: true,
-      customHeaderCell: function FunctionalComponent(props){
-          return h(
-              'span',
-              { style: 'overflow:hidden;text-overflow:ellipsis;white-space:nowrap' },
-              props.col.title + '(render) text-overflow,',
-          );
-      },
-      customCell: defineComponent({
-        setup(){
-          //...
-          return () => <div></div> // vue jsx
-        }
-      })
-    },
-  ]
-</script>
-```
-
-## Compare
-Compare performance with other vue table [vue-table-compare](https://github.com/ja-plus/vue-table-compare)
-
-
-## Other
-* `$*$`
+<p align="center">
+    <a href="https://ja-plus.github.io/stk-table-vue/">
+        <img src="./docs-src/public/assets/logo.svg" width="152">
+    </a>
+    <h3 align='center'>Stk Table Vue</h3>
+    <p align="center">
+        <a href="https://www.npmjs.com/package/stk-table-vue"><img src="https://img.shields.io/npm/v/stk-table-vue"></a>
+        <a href="https://www.npmjs.com/package/stk-table-vue"><img src="https://img.shields.io/npm/dw/stk-table-vue"></a>
+        <a href="https://github.com/ja-plus/stk-table-vue/stargazers"><img src="https://img.shields.io/github/stars/ja-plus/stk-table-vue.svg"></a>
+        <a href="https://raw.githubusercontent.com/ja-plus/stk-table-vue/master/LICENSE"><img src="https://img.shields.io/npm/l/stk-table-vue"></a>
+        <a href="https://github.com/ja-plus/stk-table-vue"><img src="https://img.shields.io/npm/types/stk-table-vue"></a>
+    </p>
+</p>
+
+Stk Table Vue(Sticky Table) is a high-performance virtual list component based on Vue.
+
+Smooth performance with tens of thousands of rows
+
+Used for real-time data display, with data highlighting and dynamic effects.
+
+Support Vue3 and Vue2.7
+
+
+## Documentation
+### [Stk Table Vue Official](https://ja-plus.github.io/stk-table-vue/)
+### [Stk Table React Official](https://ja-plus.github.io/stk-table-react/)
+
+
+## Repo: 
+- [Github](https://github.com/ja-plus/stk-table-vue)
+- [Gitee](https://gitee.com/japlus/stk-table-vue)
+
+## Demo
+[<span style="font-size: 16px;font-weight: bold;">Online Demo in stackblitz</span>](https://stackblitz.com/edit/vitejs-vite-ad91hh?file=src%2FDemo%2Findex.vue)
+
+## Usage
+> npm install stk-table-vue
+
+```html
+<script setup>
+import { StkTable } from 'stk-table-vue'
+import { ref, useTemplateRef } from 'vue'
+const stkTableRef = ref<InstanceType<typeof StkTable>>();
+// or Vue 3.5 useTemplateRef
+const stkTableRef = useTemplateRef('stkTableRef');
+
+// highlight row
+stkTableRef.value.setHighlightDimRow([rowKey], {
+  method: 'css' | 'animation', // default animation
+  className: 'custom-class-name', // for method 'css'
+  keyframe: [{ backgroundColor: '#aaa' }, { backgroundColor: '#222' }], // same as https://developer.mozilla.org/zh-CN/docs/Web/API/Web_Animations_API/Keyframe_Formats
+  duration: 2000,
+});
+// highlight cell
+stkTableRef.value.setHighlightDimCell(rowKey, colDataIndex, {
+  method: 'css' | 'animation',
+  className: 'custom-class-name', // for method 'css'
+  keyframe: [{ backgroundColor: '#aaa' }, { backgroundColor: '#222' }], // for method 'animation'
+  duration: 2000,
+});
+
+const columns = [
+  {title: 'name', dataIndex: 'name'},
+  {title: 'age', dataIndex: 'age'},
+  {title: 'address', dataIndex: 'address'},
+];
+
+const dataSource = [
+  {id: 1, name: 'John', age: 32, address: 'New York'},
+  {id: 2, name: 'Jim', age: 42, address: 'London'},
+  {id: 3, name: 'Joe', age: 52, address: 'Tokyo'},
+  {id: 4, name: 'Jack', age: 62, address: 'Sydney'},
+  {id: 5, name: 'Jill', age: 72, address: 'Paris'},
+]
+
+</script>
+
+<template>
+    <StkTable ref='stkTableRef' row-key="id" :data-source="dataSource" :columns="columns"></StkTable>
+</template>
+
+```
+
+### Vue2.7 Usage
+[Vue2.7 Usage](https://ja-plus.github.io/stk-table-vue/main/start/vue2-usage.html)
+
+## API
+* [Props](https://ja-plus.github.io/stk-table-vue/main/api/table-props.html)
+
+* [Emits](https://ja-plus.github.io/stk-table-vue/main/api/emits.html)
+
+* [Slots](https://ja-plus.github.io/stk-table-vue/main/api/slots.html)
+
+* [Expose](https://ja-plus.github.io/stk-table-vue/main/api/expose.html)
+
+* [StkTableColumn: Define column type](https://ja-plus.github.io/stk-table-vue/main/api/stk-table-column.html)
+
+* [Highlight: setHighlightDimCell & setHighlightDimRow](https://ja-plus.github.io/stk-table-vue/main/api/expose.html#sethighlightdimcell)
+
+
+### Example
+```vue
+<template>
+ <StkTable
+    ref="stkTable"
+    row-key="name"
+    v-model:columns="columns"
+    :style="{height:props.height}"
+    theme='dark'
+    height='200px'
+    bordered="h"
+    :row-height="28"
+    :show-overflow="false"
+    :show-header-overflow="false"
+    :sort-remote="false"
+    col-resizable
+    header-drag
+    virtual
+    virtual-x
+    no-data-full
+    col-resizable
+    auto-resize
+    fixed-col-shadow
+    :col-min-width="10"
+    :headless="false"
+    :data-source="dataSource"
+    @current-change="onCurrentChange"
+    @row-menu="onRowMenu"
+    @header-row-menu="onHeaderRowMenu"
+    @row-click="onRowClick"
+    @row-dblclick="onRowDblclick"
+    @sort-change="handleSortChange"
+    @cell-click="onCellClick"
+    @header-cell-click="onHeaderCellClick"
+    @scroll="onTableScroll"
+    @scroll-x="onTableScrollX"
+    @col-order-change="onColOrderChange"
+  />
+</template>
+<script setup>
+  import { h, defineComponent } from 'vue';
+  const columns = [
+    {
+      title: 'Name',
+      dataIndex: 'name',
+      fixed: 'left',
+      width: '200px',
+      headerClassName: 'my-th',
+      className: 'my-td',
+      sorter: true,
+      customHeaderCell: function FunctionalComponent(props){
+          return h(
+              'span',
+              { style: 'overflow:hidden;text-overflow:ellipsis;white-space:nowrap' },
+              props.col.title + '(render) text-overflow,',
+          );
+      },
+      customCell: defineComponent({
+        setup(){
+          //...
+          return () => <div></div> // vue jsx
+        }
+      })
+    },
+  ]
+</script>
+```
+
+## Compare
+Compare performance with other vue table [vue-table-compare](https://github.com/ja-plus/vue-table-compare)
+
+
+## Other
+* `$*$`

package/lib/{Dropdown-Clc70S1z.js → Dropdown-wEI6qpCx.js}

@@ -1,12 +1,12 @@
 /**
  * name: stk-table-vue
- * version: v1.0.0-beta.4
+ * version: v1.0.0
  * description: High performance realtime virtual table for vue3 and vue2.7
  * author: japlus
  * homepage: https://ja-plus.github.io/stk-table-vue/
  * license: MIT
  */
-import { t as StkTable_default } from "./StkTable-QUd4TJCF.js";
+import { t as StkTable_default } from "./StkTable-BK4VNsvG.js";
 import { createElementBlock, createElementVNode, createVNode, defineComponent, h, nextTick, normalizeClass, normalizeStyle, onMounted, onUnmounted, openBlock, reactive, ref, withModifiers } from "vue";
 //#region src/StkTable/custom-cells/FilterCell/Dropdown/index.vue?vue&type=script&setup=true&lang.ts
 var DROPDOWN_DEFAULT_WIDTH = 300;

package/lib/{StkTable-QUd4TJCF.js → StkTable-BK4VNsvG.js}

@@ -1,6 +1,6 @@
 /**
  * name: stk-table-vue
- * version: v1.0.0-beta.4
+ * version: v1.0.0
  * description: High performance realtime virtual table for vue3 and vue2.7
  * author: japlus
  * homepage: https://ja-plus.github.io/stk-table-vue/
@@ -347,12 +347,12 @@ function useAreaSelection(props, emits, tableContainerRef, dataSourceCopy, table
 	const KEY_ESCAPE = "Escape";
 	const KEY_ESC = "Esc";
 	const KEY_C = "c";
-	const CELL_RANGE_SELECTED = "cell-range-selected";
-	const CELL_RANGE_TOP = "cell-range-t";
-	const CELL_RANGE_BOTTOM = "cell-range-b";
-	const CELL_RANGE_LEFT = "cell-range-l";
-	const CELL_RANGE_RIGHT = "cell-range-r";
-	const ROW_RANGE_SELECTED = "row-range-selected";
+	const ATTR_CELL_SELECTED = "data-cs-s";
+	const ATTR_CELL_TOP = "data-cs-t";
+	const ATTR_CELL_BOTTOM = "data-cs-b";
+	const ATTR_CELL_LEFT = "data-cs-l";
+	const ATTR_CELL_RIGHT = "data-cs-r";
+	const ATTR_ROW_SELECTED = "data-rs-s";
 	const selectionRanges = ref([]);
 	const isSelecting = ref(false);
 	/** start cell */
@@ -478,10 +478,17 @@ function useAreaSelection(props, emits, tableContainerRef, dataSourceCopy, table
 		if (!container) return;
 		const cellHighlight = highlightCellEnabled.value;
 		const rowHighlight = highlightRowEnabled.value;
-		const oldSelectedCells = container.querySelectorAll(`.${CELL_RANGE_SELECTED}`);
-		for (let i = 0; i < oldSelectedCells.length; i++) oldSelectedCells[i].classList.remove(CELL_RANGE_SELECTED, CELL_RANGE_TOP, CELL_RANGE_BOTTOM, CELL_RANGE_LEFT, CELL_RANGE_RIGHT);
-		const oldSelectedRows = container.querySelectorAll(`.${ROW_RANGE_SELECTED}`);
-		for (let i = 0; i < oldSelectedRows.length; i++) oldSelectedRows[i].classList.remove(ROW_RANGE_SELECTED);
+		const oldSelectedCells = container.querySelectorAll(`[${ATTR_CELL_SELECTED}]`);
+		for (let i = 0; i < oldSelectedCells.length; i++) {
+			const el = oldSelectedCells[i];
+			el.removeAttribute(ATTR_CELL_SELECTED);
+			el.removeAttribute(ATTR_CELL_TOP);
+			el.removeAttribute(ATTR_CELL_BOTTOM);
+			el.removeAttribute(ATTR_CELL_LEFT);
+			el.removeAttribute(ATTR_CELL_RIGHT);
+		}
+		const oldSelectedRows = container.querySelectorAll(`[${ATTR_ROW_SELECTED}]`);
+		for (let i = 0; i < oldSelectedRows.length; i++) oldSelectedRows[i].removeAttribute(ATTR_ROW_SELECTED);
 		recomputeSelectedCellKeys();
 		const ranges = selectionRanges.value;
 		if (!ranges.length) return;
@@ -491,7 +498,7 @@ function useAreaSelection(props, emits, tableContainerRef, dataSourceCopy, table
 			const { minRow, maxRow } = normalizeRange(range);
 			for (let r = minRow; r <= maxRow; r++) {
 				const tr = tbody.querySelector(`tr[data-row-i="${r}"]`);
-				if (tr) tr.classList.add(ROW_RANGE_SELECTED);
+				if (tr) tr.setAttribute(ATTR_ROW_SELECTED, "");
 			}
 		}
 		if (cellHighlight) {
@@ -521,12 +528,14 @@ function useAreaSelection(props, emits, tableContainerRef, dataSourceCopy, table
 					if (!row || !cols[colIndex]) continue;
 					const ck = cellKeyGen(row, cols[colIndex]);
 					if (!selectedCellKeys.has(ck)) continue;
-					td.classList.add(CELL_RANGE_SELECTED);
+					td.setAttribute(ATTR_CELL_SELECTED, "");
 					if (rowIndex >= lrMinRow && rowIndex <= lrMaxRow && colIndex >= lrMinCol && colIndex <= lrMaxCol) {
-						if (rowIndex === lrMinRow) td.classList.add(CELL_RANGE_TOP);
-						if (rowIndex === lrMaxRow) td.classList.add(CELL_RANGE_BOTTOM);
-						if (colIndex === lrMinCol) td.classList.add(CELL_RANGE_LEFT);
-						if (colIndex === lrMaxCol) td.classList.add(CELL_RANGE_RIGHT);
+						const effEndRow = rowIndex + (parseInt(td.getAttribute("rowspan") || "1", 10) || 1) - 1;
+						const effEndCol = colIndex + (parseInt(td.getAttribute("colspan") || "1", 10) || 1) - 1;
+						if (rowIndex === lrMinRow) td.setAttribute(ATTR_CELL_TOP, "");
+						if (effEndRow === lrMaxRow) td.setAttribute(ATTR_CELL_BOTTOM, "");
+						if (colIndex === lrMinCol) td.setAttribute(ATTR_CELL_LEFT, "");
+						if (effEndCol === lrMaxCol) td.setAttribute(ATTR_CELL_RIGHT, "");
 					}
 				}
 			}
@@ -642,6 +651,92 @@ function useAreaSelection(props, emits, tableContainerRef, dataSourceCopy, table
 		if (!colKey) return -1;
 		return colKeyToIndexMap.value.get(colKey) ?? -1;
 	}
+	/** 获取指定单元格的合并信息 [rowspan, colspan]，无合并返回 [1, 1] */
+	function getMergeSpan(rowIndex, colIndex) {
+		const data = dataSourceCopy.value;
+		const cols = tableHeaderLast.value;
+		const row = data[rowIndex];
+		const col = cols[colIndex];
+		if (!row || !col || !col.mergeCells) return [1, 1];
+		const { rowspan = 1, colspan = 1 } = col.mergeCells({
+			row,
+			col,
+			rowIndex,
+			colIndex
+		}) || {};
+		return [rowspan || 1, colspan || 1];
+	}
+	/**
+	* 扩展选区范围，使其完整覆盖边界上部分选中的合并单元格
+	* en: Expand selection range to fully cover merged cells that are partially selected at boundaries
+	*/
+	function expandRangeToCoverMergedCells(range) {
+		const { minRow, maxRow, minCol, maxCol } = normalizeRange(range);
+		const data = dataSourceCopy.value;
+		const cols = tableHeaderLast.value;
+		const rowCount = data.length;
+		const colCount = cols.length;
+		const mergeColIndices = [];
+		for (let c = 0; c < colCount; c++) {
+			var _cols$c;
+			if ((_cols$c = cols[c]) === null || _cols$c === void 0 ? void 0 : _cols$c.mergeCells) mergeColIndices.push(c);
+		}
+		if (!mergeColIndices.length) return range;
+		let [eMinRow, eMaxRow, eMinCol, eMaxCol] = [
+			minRow,
+			maxRow,
+			minCol,
+			maxCol
+		];
+		let changed = true;
+		let guard = 0;
+		while (changed && guard++ < 100) {
+			changed = false;
+			for (const c of mergeColIndices) {
+				if (c < eMinCol || c > eMaxCol) continue;
+				const [rs] = getMergeSpan(eMaxRow, c);
+				if (rs > 1 && eMaxRow + rs - 1 < rowCount && eMaxRow + rs - 1 > eMaxRow) {
+					eMaxRow = eMaxRow + rs - 1;
+					changed = true;
+				}
+			}
+			for (let r = eMinRow; r <= eMaxRow; r++) {
+				const [, cs] = getMergeSpan(r, eMaxCol);
+				if (cs > 1 && eMaxCol + cs - 1 < colCount && eMaxCol + cs - 1 > eMaxCol) {
+					eMaxCol = eMaxCol + cs - 1;
+					changed = true;
+				}
+			}
+			for (const c of mergeColIndices) {
+				if (c < eMinCol || c > eMaxCol) continue;
+				for (let r = eMinRow - 1; r >= 0 && r > eMinRow - 500; r--) {
+					const [rs] = getMergeSpan(r, c);
+					if (rs <= 1) continue;
+					if (r + rs - 1 >= eMinRow) {
+						if (r < eMinRow) {
+							eMinRow = r;
+							changed = true;
+						}
+					} else break;
+				}
+			}
+			for (let r = eMinRow; r <= eMaxRow; r++) for (let c = eMinCol - 1; c >= 0 && c > eMinCol - 500; c--) {
+				const [, cs] = getMergeSpan(r, c);
+				if (cs <= 1) continue;
+				if (c + cs - 1 >= eMinCol) {
+					if (c < eMinCol) {
+						eMinCol = c;
+						changed = true;
+					}
+				} else break;
+			}
+		}
+		if (eMinRow === minRow && eMaxRow === maxRow && eMinCol === minCol && eMaxCol === maxCol) return range;
+		const { begin, end } = range.index;
+		const newBeginRow = begin.row < end.row || begin.row === end.row ? eMinRow : eMaxRow;
+		const newEndRow = begin.row < end.row || begin.row === end.row ? eMaxRow : eMinRow;
+		return makeRange(newBeginRow, begin.col <= end.col ? eMinCol : eMaxCol, newEndRow, begin.col <= end.col ? eMaxCol : eMinCol);
+	}
 	/** 获取列的左边距和宽度
 	* @param colIndex 列的绝对索引
 	* @returns [left, width]
@@ -720,10 +815,10 @@ function useAreaSelection(props, emits, tableContainerRef, dataSourceCopy, table
 		const colIndex = getColIndexByKey(getClosestColKey(e.target));
 		if (rowIndex < 0 || colIndex < 0) return;
 		const ctrlKey = e.ctrlKey || e.metaKey;
-		const range = makeRange(rowIndex, colIndex, rowIndex, colIndex);
+		const range = expandRangeToCoverMergedCells(makeRange(rowIndex, colIndex, rowIndex, colIndex));
 		if (e.shiftKey && anchorCell && shiftEnabled.value) {
 			const ranges = selectionRanges.value.slice();
-			const shiftRange = makeRange(anchorCell.rowIndex, anchorCell.colIndex, rowIndex, colIndex);
+			const shiftRange = expandRangeToCoverMergedCells(makeRange(anchorCell.rowIndex, anchorCell.colIndex, rowIndex, colIndex));
 			if (ranges.length) ranges[ranges.length - 1] = shiftRange;
 			else ranges.push(shiftRange);
 			selectionRanges.value = ranges;
@@ -762,7 +857,7 @@ function useAreaSelection(props, emits, tableContainerRef, dataSourceCopy, table
 	/** 更新最后一个选区的终点（拖拽过程中） */
 	function updateSelectionEnd(endRowIndex, endColIndex) {
 		if (!anchorCell) return;
-		const newRange = makeRange(anchorCell.rowIndex, anchorCell.colIndex, endRowIndex, endColIndex);
+		const newRange = expandRangeToCoverMergedCells(makeRange(anchorCell.rowIndex, anchorCell.colIndex, endRowIndex, endColIndex));
 		const ranges = [...selectionRanges.value];
 		if (ranges.length > 0) ranges[ranges.length - 1] = newRange;
 		else ranges.push(newRange);
@@ -825,6 +920,15 @@ function useAreaSelection(props, emits, tableContainerRef, dataSourceCopy, table
 		stopAutoScroll();
 		document.removeEventListener("mousemove", onDocumentMouseMove);
 		document.removeEventListener("mouseup", onDocumentMouseUp);
+		const ranges = selectionRanges.value;
+		if (ranges.length) {
+			const expanded = expandRangeToCoverMergedCells(ranges[ranges.length - 1]);
+			if (expanded !== ranges[ranges.length - 1]) {
+				const newRanges = [...ranges];
+				newRanges[newRanges.length - 1] = expanded;
+				selectionRanges.value = newRanges;
+			}
+		}
 		emitSelectionChange();
 	}
 	function emitSelectionChange() {

package/lib/src/StkTable/custom-cells/ChangeCell/createChangeCell.d.ts

@@ -0,0 +1,55 @@
+import { FormatNumberOptions } from '../utils/formatNumber';
+
+/** createChangeCell 配置选项 */
+export interface CreateChangeCellOptions extends FormatNumberOptions {
+    /** 涨跌颜色是否反转：false=A股(涨红跌绿，默认)，true=国际(涨绿跌红) */
+    colorReverse?: boolean;
+    /** 是否显示涨跌箭头 ▲/▼，默认 false */
+    arrow?: boolean;
+    /** 自定义上涨颜色（覆盖默认配色，传入后不受 colorReverse 影响） */
+    riseColor?: string;
+    /** 自定义下跌颜色 */
+    fallColor?: string;
+    /** 自定义平盘颜色 */
+    flatColor?: string;
+}
+/**
+ * 涨跌单元格工厂函数
+ *
+ * 在 {@link formatNumber} 的基础上叠加涨跌染色与箭头。染色按 `cellValue` 正负判断，
+ * 颜色方向可通过 `colorReverse` 切换（A股 / 国际），也可用 `riseColor` 等自定义。
+ * 数字对齐请在列配置上设置 `align: 'right'`。
+ *
+ * @param options 格式化 + 染色/箭头选项
+ * @returns `ChangeCell` 组件构造函数，使用时需调用一次：`customCell: ChangeCell()`
+ *
+ * @example
+ * ```ts
+ * const { ChangeCell } = createChangeCell({ decimals: 2, showSign: true, arrow: true });
+ * const ChangeCellComp = ChangeCell();
+ * const columns = [
+ *   { title: '涨跌额', dataIndex: 'change', align: 'right', customCell: ChangeCellComp },
+ * ];
+ * ```
+ */
+export declare function createChangeCell(options?: CreateChangeCellOptions): {
+    ChangeCell: () => import('vue').Raw<import('vue').DefineComponent<{
+        row: any;
+        col: import('../..').StkTableColumn<any>;
+        cellValue: any;
+        rowIndex: number;
+        colIndex: number;
+        expanded?: import('../..').StkTableColumn<any> | undefined;
+        treeExpanded?: boolean | undefined;
+    }, () => import('vue').VNode<import('vue').RendererNode, import('vue').RendererElement, {
+        [key: string]: any;
+    }>, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<{
+        row: any;
+        col: import('../..').StkTableColumn<any>;
+        cellValue: any;
+        rowIndex: number;
+        colIndex: number;
+        expanded?: import('../..').StkTableColumn<any> | undefined;
+        treeExpanded?: boolean | undefined;
+    }> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>>;
+};

package/lib/src/StkTable/custom-cells/ChangeCell/index.d.ts

@@ -0,0 +1,2 @@
+export { createChangeCell } from './createChangeCell';
+export type { CreateChangeCellOptions } from './createChangeCell';