stk-table-vue 0.8.10 → 0.8.11
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -18,7 +18,9 @@ export type CustomCellProps<T extends Record<string, any>> = {
|
|
|
18
18
|
* - 不展开: null
|
|
19
19
|
* - 展开: 返回column配置
|
|
20
20
|
*/
|
|
21
|
-
expanded
|
|
21
|
+
expanded: PrivateRowDT['__EXP__'];
|
|
22
|
+
/** if tree expanded */
|
|
23
|
+
treeExpanded: PrivateRowDT['__T_EXP__'];
|
|
22
24
|
};
|
|
23
25
|
export type CustomHeaderCellProps<T extends Record<string, any>> = {
|
|
24
26
|
col: StkTableColumn<T>;
|
package/lib/stk-table-vue.js
CHANGED
|
@@ -1719,7 +1719,6 @@ const _hoisted_9 = ["colspan"];
|
|
|
1719
1719
|
const _hoisted_10 = { class: "table-cell-wrapper" };
|
|
1720
1720
|
const _hoisted_11 = ["data-cell-key", "onClick", "onMousedown", "onMouseenter", "onMouseleave", "onMouseover"];
|
|
1721
1721
|
const _hoisted_12 = ["title"];
|
|
1722
|
-
const _hoisted_13 = ["title"];
|
|
1723
1722
|
const _sfc_main = /* @__PURE__ */ defineComponent({
|
|
1724
1723
|
__name: "StkTable",
|
|
1725
1724
|
props: {
|
|
@@ -1952,27 +1951,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
|
|
|
1952
1951
|
);
|
|
1953
1952
|
watch(
|
|
1954
1953
|
() => props.dataSource,
|
|
1955
|
-
(val) =>
|
|
1956
|
-
if (!Array.isArray(val)) {
|
|
1957
|
-
console.warn("invalid dataSource");
|
|
1958
|
-
return;
|
|
1959
|
-
}
|
|
1960
|
-
let needInitVirtualScrollY = false;
|
|
1961
|
-
if (dataSourceCopy.value.length !== val.length) {
|
|
1962
|
-
needInitVirtualScrollY = true;
|
|
1963
|
-
}
|
|
1964
|
-
initDataSource(val);
|
|
1965
|
-
updateMaxRowSpan();
|
|
1966
|
-
if (needInitVirtualScrollY) {
|
|
1967
|
-
nextTick(() => initVirtualScrollY());
|
|
1968
|
-
}
|
|
1969
|
-
const sortColValue = sortCol.value;
|
|
1970
|
-
if (!isEmptyValue(sortColValue) && !props.sortRemote) {
|
|
1971
|
-
const colKey = colKeyGen.value;
|
|
1972
|
-
const column = tableHeaderLast.value.find((it) => colKey(it) === sortColValue);
|
|
1973
|
-
onColumnSort(column, false);
|
|
1974
|
-
}
|
|
1975
|
-
}
|
|
1954
|
+
(val) => updateDataSource(val)
|
|
1976
1955
|
);
|
|
1977
1956
|
watch(
|
|
1978
1957
|
() => props.fixedColShadow,
|
|
@@ -2067,13 +2046,34 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
|
|
|
2067
2046
|
tableHeaders.value = tableHeadersTemp;
|
|
2068
2047
|
tableHeadersForCalc.value = tableHeadersForCalcTemp;
|
|
2069
2048
|
}
|
|
2049
|
+
function updateDataSource(val) {
|
|
2050
|
+
if (!Array.isArray(val)) {
|
|
2051
|
+
console.warn("invalid dataSource");
|
|
2052
|
+
return;
|
|
2053
|
+
}
|
|
2054
|
+
let needInitVirtualScrollY = false;
|
|
2055
|
+
if (dataSourceCopy.value.length !== val.length) {
|
|
2056
|
+
needInitVirtualScrollY = true;
|
|
2057
|
+
}
|
|
2058
|
+
initDataSource(val);
|
|
2059
|
+
updateMaxRowSpan();
|
|
2060
|
+
if (needInitVirtualScrollY) {
|
|
2061
|
+
nextTick(() => initVirtualScrollY());
|
|
2062
|
+
}
|
|
2063
|
+
const sortColValue = sortCol.value;
|
|
2064
|
+
if (!isEmptyValue(sortColValue) && !props.sortRemote) {
|
|
2065
|
+
const colKey = colKeyGen.value;
|
|
2066
|
+
const column = tableHeaderLast.value.find((it) => colKey(it) === sortColValue);
|
|
2067
|
+
onColumnSort(column, false);
|
|
2068
|
+
}
|
|
2069
|
+
}
|
|
2070
2070
|
function rowKeyGen(row) {
|
|
2071
2071
|
if (!row) return row;
|
|
2072
2072
|
let key = rowKeyGenCache.get(row) || row.__ROW_K__;
|
|
2073
2073
|
if (!key) {
|
|
2074
2074
|
key = rowKeyGenComputed.value(row);
|
|
2075
2075
|
if (key === void 0) {
|
|
2076
|
-
key = Math.random().toString();
|
|
2076
|
+
key = Math.random().toString(36).slice(2);
|
|
2077
2077
|
}
|
|
2078
2078
|
rowKeyGenCache.set(row, key);
|
|
2079
2079
|
}
|
|
@@ -2747,27 +2747,42 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
|
|
|
2747
2747
|
onMouseleave: ($event) => onCellMouseLeave($event, row, col),
|
|
2748
2748
|
onMouseover: ($event) => onCellMouseOver($event, row, col)
|
|
2749
2749
|
}), [
|
|
2750
|
-
col.
|
|
2750
|
+
col.customCell ? (openBlock(), createBlock(resolveDynamicComponent(col.customCell), {
|
|
2751
2751
|
key: 0,
|
|
2752
2752
|
class: "table-cell-wrapper",
|
|
2753
|
-
|
|
2754
|
-
|
|
2753
|
+
col,
|
|
2754
|
+
row,
|
|
2755
|
+
rowIndex: getRowIndex(rowIndex),
|
|
2756
|
+
colIndex,
|
|
2757
|
+
cellValue: row && row[col.dataIndex],
|
|
2758
|
+
expanded: row ? row.__EXP_ : null,
|
|
2759
|
+
"tree-expanded": row ? row.__T_EXP__ : null
|
|
2760
|
+
}, {
|
|
2761
|
+
stkFoldIcon: withCtx(() => [
|
|
2762
|
+
createVNode(TriangleIcon, {
|
|
2763
|
+
onClick: ($event) => triangleClick($event, row, col)
|
|
2764
|
+
}, null, 8, ["onClick"])
|
|
2765
|
+
]),
|
|
2766
|
+
stkDragIcon: withCtx(() => [
|
|
2767
|
+
createVNode(DragHandle, {
|
|
2768
|
+
onDragstart: ($event) => unref(onTrDragStart)($event, getRowIndex(rowIndex))
|
|
2769
|
+
}, null, 8, ["onDragstart"])
|
|
2770
|
+
]),
|
|
2771
|
+
_: 2
|
|
2772
|
+
}, 1032, ["col", "row", "rowIndex", "colIndex", "cellValue", "expanded", "tree-expanded"])) : (openBlock(), createElementBlock("div", {
|
|
2773
|
+
key: 1,
|
|
2774
|
+
class: "table-cell-wrapper",
|
|
2775
|
+
title: col.type !== "seq" ? row == null ? void 0 : row[col.dataIndex] : "",
|
|
2776
|
+
style: normalizeStyle(col.type === "tree-node" ? { paddingLeft: row.__T_LV__ && row.__T_LV__ * 16 + "px" } : {})
|
|
2755
2777
|
}, [
|
|
2756
|
-
col.
|
|
2757
|
-
|
|
2758
|
-
|
|
2759
|
-
|
|
2760
|
-
|
|
2761
|
-
|
|
2762
|
-
|
|
2763
|
-
|
|
2764
|
-
"tree-expanded": row && row.__T_EXP__ || null
|
|
2765
|
-
}, {
|
|
2766
|
-
stkFoldIcon: withCtx(() => [
|
|
2767
|
-
createVNode(TriangleIcon)
|
|
2768
|
-
]),
|
|
2769
|
-
_: 2
|
|
2770
|
-
}, 1032, ["col", "row", "rowIndex", "colIndex", "cellValue", "expanded", "tree-expanded"])) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [
|
|
2778
|
+
col.type === "seq" ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
|
|
2779
|
+
createTextVNode(toDisplayString((props.seqConfig.startIndex || 0) + getRowIndex(rowIndex) + 1), 1)
|
|
2780
|
+
], 64)) : col.type === "dragRow" ? (openBlock(), createElementBlock(Fragment, { key: 1 }, [
|
|
2781
|
+
createVNode(DragHandle, {
|
|
2782
|
+
onDragstart: ($event) => unref(onTrDragStart)($event, getRowIndex(rowIndex))
|
|
2783
|
+
}, null, 8, ["onDragstart"]),
|
|
2784
|
+
createElementVNode("span", null, toDisplayString((row == null ? void 0 : row[col.dataIndex]) ?? ""), 1)
|
|
2785
|
+
], 64)) : col.type === "expand" || col.type === "tree-node" ? (openBlock(), createElementBlock(Fragment, { key: 2 }, [
|
|
2771
2786
|
col.type === "expand" || col.type === "tree-node" && row.children !== void 0 ? (openBlock(), createBlock(TriangleIcon, {
|
|
2772
2787
|
key: 0,
|
|
2773
2788
|
onClick: ($event) => triangleClick($event, row, col)
|
|
@@ -2775,43 +2790,10 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
|
|
|
2775
2790
|
createElementVNode("span", {
|
|
2776
2791
|
style: normalizeStyle(col.type === "tree-node" && !row.children ? "padding-left: 16px;" : "")
|
|
2777
2792
|
}, toDisplayString((row == null ? void 0 : row[col.dataIndex]) ?? ""), 5)
|
|
2793
|
+
], 64)) : (openBlock(), createElementBlock(Fragment, { key: 3 }, [
|
|
2794
|
+
createTextVNode(toDisplayString((row == null ? void 0 : row[col.dataIndex]) ?? getEmptyCellText.value(col, row)), 1)
|
|
2778
2795
|
], 64))
|
|
2779
|
-
], 12, _hoisted_12))
|
|
2780
|
-
col.customCell ? (openBlock(), createBlock(resolveDynamicComponent(col.customCell), {
|
|
2781
|
-
key: 0,
|
|
2782
|
-
class: "table-cell-wrapper",
|
|
2783
|
-
col,
|
|
2784
|
-
row,
|
|
2785
|
-
rowIndex: getRowIndex(rowIndex),
|
|
2786
|
-
colIndex,
|
|
2787
|
-
cellValue: row && row[col.dataIndex]
|
|
2788
|
-
}, {
|
|
2789
|
-
stkFoldIcon: withCtx(() => [
|
|
2790
|
-
createVNode(TriangleIcon)
|
|
2791
|
-
]),
|
|
2792
|
-
stkDragIcon: withCtx(() => [
|
|
2793
|
-
createVNode(DragHandle, {
|
|
2794
|
-
onDragstart: ($event) => unref(onTrDragStart)($event, getRowIndex(rowIndex))
|
|
2795
|
-
}, null, 8, ["onDragstart"])
|
|
2796
|
-
]),
|
|
2797
|
-
_: 2
|
|
2798
|
-
}, 1032, ["col", "row", "rowIndex", "colIndex", "cellValue"])) : (openBlock(), createElementBlock("div", {
|
|
2799
|
-
key: 1,
|
|
2800
|
-
class: "table-cell-wrapper",
|
|
2801
|
-
title: col.type !== "seq" ? row == null ? void 0 : row[col.dataIndex] : ""
|
|
2802
|
-
}, [
|
|
2803
|
-
col.type === "seq" ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
|
|
2804
|
-
createTextVNode(toDisplayString((props.seqConfig.startIndex || 0) + getRowIndex(rowIndex) + 1), 1)
|
|
2805
|
-
], 64)) : col.type === "dragRow" ? (openBlock(), createElementBlock(Fragment, { key: 1 }, [
|
|
2806
|
-
createVNode(DragHandle, {
|
|
2807
|
-
onDragstart: ($event) => unref(onTrDragStart)($event, getRowIndex(rowIndex))
|
|
2808
|
-
}, null, 8, ["onDragstart"]),
|
|
2809
|
-
createElementVNode("span", null, toDisplayString((row == null ? void 0 : row[col.dataIndex]) ?? ""), 1)
|
|
2810
|
-
], 64)) : (openBlock(), createElementBlock(Fragment, { key: 2 }, [
|
|
2811
|
-
createTextVNode(toDisplayString((row == null ? void 0 : row[col.dataIndex]) ?? getEmptyCellText.value(col, row)), 1)
|
|
2812
|
-
], 64))
|
|
2813
|
-
], 8, _hoisted_13))
|
|
2814
|
-
], 64))
|
|
2796
|
+
], 12, _hoisted_12))
|
|
2815
2797
|
], 16, _hoisted_11)) : createCommentVNode("", true)
|
|
2816
2798
|
], 64);
|
|
2817
2799
|
}), 256))
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "stk-table-vue",
|
|
3
|
-
"version": "0.8.
|
|
4
|
-
"description": "
|
|
3
|
+
"version": "0.8.11",
|
|
4
|
+
"description": "High performance realtime virtual table for vue3 and vue2.7",
|
|
5
5
|
"main": "./lib/stk-table-vue.js",
|
|
6
6
|
"types": "./lib/src/StkTable/index.d.ts",
|
|
7
7
|
"packageManager": "pnpm@10.7.0",
|
|
@@ -164,71 +164,53 @@
|
|
|
164
164
|
@mouseleave="onCellMouseLeave($event, row, col)"
|
|
165
165
|
@mouseover="onCellMouseOver($event, row, col)"
|
|
166
166
|
>
|
|
167
|
-
<
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
|
|
177
|
-
|
|
178
|
-
|
|
179
|
-
|
|
180
|
-
|
|
181
|
-
|
|
182
|
-
|
|
183
|
-
|
|
184
|
-
|
|
185
|
-
|
|
186
|
-
|
|
187
|
-
|
|
188
|
-
|
|
189
|
-
|
|
190
|
-
|
|
191
|
-
|
|
192
|
-
|
|
193
|
-
|
|
194
|
-
|
|
195
|
-
|
|
196
|
-
|
|
197
|
-
|
|
198
|
-
|
|
199
|
-
|
|
200
|
-
|
|
201
|
-
|
|
202
|
-
|
|
203
|
-
|
|
204
|
-
|
|
205
|
-
|
|
206
|
-
:
|
|
207
|
-
|
|
208
|
-
|
|
209
|
-
>
|
|
210
|
-
|
|
211
|
-
|
|
212
|
-
|
|
213
|
-
|
|
214
|
-
<DragHandle @dragstart="onTrDragStart($event, getRowIndex(rowIndex))" />
|
|
215
|
-
</template>
|
|
216
|
-
</component>
|
|
217
|
-
<div v-else class="table-cell-wrapper" :title="col.type !== 'seq' ? row?.[col.dataIndex] : ''">
|
|
218
|
-
<template v-if="col.type === 'seq'">
|
|
219
|
-
{{ (props.seqConfig.startIndex || 0) + getRowIndex(rowIndex) + 1 }}
|
|
220
|
-
</template>
|
|
221
|
-
<template v-else-if="col.type === 'dragRow'">
|
|
222
|
-
<DragHandle @dragstart="onTrDragStart($event, getRowIndex(rowIndex))" />
|
|
223
|
-
<span>
|
|
224
|
-
{{ row?.[col.dataIndex] ?? '' }}
|
|
225
|
-
</span>
|
|
226
|
-
</template>
|
|
227
|
-
<template v-else>
|
|
228
|
-
{{ row?.[col.dataIndex] ?? getEmptyCellText(col, row) }}
|
|
229
|
-
</template>
|
|
230
|
-
</div>
|
|
231
|
-
</template>
|
|
167
|
+
<component
|
|
168
|
+
:is="col.customCell"
|
|
169
|
+
v-if="col.customCell"
|
|
170
|
+
class="table-cell-wrapper"
|
|
171
|
+
:col="col"
|
|
172
|
+
:row="row"
|
|
173
|
+
:rowIndex="getRowIndex(rowIndex)"
|
|
174
|
+
:colIndex="colIndex"
|
|
175
|
+
:cellValue="row && row[col.dataIndex]"
|
|
176
|
+
:expanded="row ? row.__EXP_ : null"
|
|
177
|
+
:tree-expanded="row ? row.__T_EXP__ : null"
|
|
178
|
+
>
|
|
179
|
+
<template #stkFoldIcon>
|
|
180
|
+
<TriangleIcon @click="triangleClick($event, row, col)"></TriangleIcon>
|
|
181
|
+
</template>
|
|
182
|
+
<template #stkDragIcon>
|
|
183
|
+
<DragHandle @dragstart="onTrDragStart($event, getRowIndex(rowIndex))" />
|
|
184
|
+
</template>
|
|
185
|
+
</component>
|
|
186
|
+
<div
|
|
187
|
+
v-else
|
|
188
|
+
class="table-cell-wrapper"
|
|
189
|
+
:title="col.type !== 'seq' ? row?.[col.dataIndex] : ''"
|
|
190
|
+
:style="col.type === 'tree-node' ? { paddingLeft: row.__T_LV__ && row.__T_LV__ * 16 + 'px' } : {}"
|
|
191
|
+
>
|
|
192
|
+
<template v-if="col.type === 'seq'">
|
|
193
|
+
{{ (props.seqConfig.startIndex || 0) + getRowIndex(rowIndex) + 1 }}
|
|
194
|
+
</template>
|
|
195
|
+
<template v-else-if="col.type === 'dragRow'">
|
|
196
|
+
<DragHandle @dragstart="onTrDragStart($event, getRowIndex(rowIndex))" />
|
|
197
|
+
<span>
|
|
198
|
+
{{ row?.[col.dataIndex] ?? '' }}
|
|
199
|
+
</span>
|
|
200
|
+
</template>
|
|
201
|
+
<template v-else-if="col.type === 'expand' || col.type === 'tree-node'">
|
|
202
|
+
<TriangleIcon
|
|
203
|
+
v-if="col.type === 'expand' || (col.type === 'tree-node' && row.children !== void 0)"
|
|
204
|
+
@click="triangleClick($event, row, col)"
|
|
205
|
+
/>
|
|
206
|
+
<span :style="col.type === 'tree-node' && !row.children ? 'padding-left: 16px;' : ''">
|
|
207
|
+
{{ row?.[col.dataIndex] ?? '' }}
|
|
208
|
+
</span>
|
|
209
|
+
</template>
|
|
210
|
+
<template v-else>
|
|
211
|
+
{{ row?.[col.dataIndex] ?? getEmptyCellText(col, row) }}
|
|
212
|
+
</template>
|
|
213
|
+
</div>
|
|
232
214
|
</td>
|
|
233
215
|
</template>
|
|
234
216
|
</template>
|
|
@@ -904,31 +886,7 @@ watch(
|
|
|
904
886
|
|
|
905
887
|
watch(
|
|
906
888
|
() => props.dataSource,
|
|
907
|
-
val =>
|
|
908
|
-
if (!Array.isArray(val)) {
|
|
909
|
-
console.warn('invalid dataSource');
|
|
910
|
-
return;
|
|
911
|
-
}
|
|
912
|
-
|
|
913
|
-
let needInitVirtualScrollY = false;
|
|
914
|
-
if (dataSourceCopy.value.length !== val.length) {
|
|
915
|
-
needInitVirtualScrollY = true;
|
|
916
|
-
}
|
|
917
|
-
initDataSource(val);
|
|
918
|
-
updateMaxRowSpan();
|
|
919
|
-
// if data length is not change, not init virtual scroll
|
|
920
|
-
if (needInitVirtualScrollY) {
|
|
921
|
-
// wait for table render,initVirtualScrollY has get `dom` operation.
|
|
922
|
-
nextTick(() => initVirtualScrollY());
|
|
923
|
-
}
|
|
924
|
-
const sortColValue = sortCol.value;
|
|
925
|
-
if (!isEmptyValue(sortColValue) && !props.sortRemote) {
|
|
926
|
-
// sort
|
|
927
|
-
const colKey = colKeyGen.value;
|
|
928
|
-
const column = tableHeaderLast.value.find(it => colKey(it) === sortColValue);
|
|
929
|
-
onColumnSort(column, false);
|
|
930
|
-
}
|
|
931
|
-
},
|
|
889
|
+
val => updateDataSource(val),
|
|
932
890
|
);
|
|
933
891
|
|
|
934
892
|
watch(
|
|
@@ -1057,6 +1015,33 @@ function dealColumns() {
|
|
|
1057
1015
|
tableHeadersForCalc.value = tableHeadersForCalcTemp;
|
|
1058
1016
|
}
|
|
1059
1017
|
|
|
1018
|
+
function updateDataSource(val:DT[]) {
|
|
1019
|
+
if (!Array.isArray(val)) {
|
|
1020
|
+
console.warn('invalid dataSource');
|
|
1021
|
+
return;
|
|
1022
|
+
}
|
|
1023
|
+
|
|
1024
|
+
let needInitVirtualScrollY = false;
|
|
1025
|
+
if (dataSourceCopy.value.length !== val.length) {
|
|
1026
|
+
needInitVirtualScrollY = true;
|
|
1027
|
+
}
|
|
1028
|
+
initDataSource(val);
|
|
1029
|
+
updateMaxRowSpan();
|
|
1030
|
+
// if data length is not change, not init virtual scroll
|
|
1031
|
+
if (needInitVirtualScrollY) {
|
|
1032
|
+
// wait for table render,initVirtualScrollY has get `dom` operation.
|
|
1033
|
+
nextTick(() => initVirtualScrollY());
|
|
1034
|
+
}
|
|
1035
|
+
const sortColValue = sortCol.value;
|
|
1036
|
+
if (!isEmptyValue(sortColValue) && !props.sortRemote) {
|
|
1037
|
+
// sort
|
|
1038
|
+
const colKey = colKeyGen.value;
|
|
1039
|
+
const column = tableHeaderLast.value.find(it => colKey(it) === sortColValue);
|
|
1040
|
+
onColumnSort(column, false);
|
|
1041
|
+
}
|
|
1042
|
+
}
|
|
1043
|
+
|
|
1044
|
+
|
|
1060
1045
|
/**
|
|
1061
1046
|
* 行唯一值生成
|
|
1062
1047
|
*/
|
|
@@ -1068,7 +1053,7 @@ function rowKeyGen(row: DT | null | undefined) {
|
|
|
1068
1053
|
|
|
1069
1054
|
if (key === void 0) {
|
|
1070
1055
|
// key为undefined时，不应该高亮行。因此重新生成key
|
|
1071
|
-
key = Math.random().toString();
|
|
1056
|
+
key = Math.random().toString(36).slice(2);
|
|
1072
1057
|
}
|
|
1073
1058
|
rowKeyGenCache.set(row, key);
|
|
1074
1059
|
}
|
|
@@ -17,7 +17,9 @@ export type CustomCellProps<T extends Record<string, any>> = {
|
|
|
17
17
|
* - 不展开: null
|
|
18
18
|
* - 展开: 返回column配置
|
|
19
19
|
*/
|
|
20
|
-
expanded
|
|
20
|
+
expanded: PrivateRowDT['__EXP__'];
|
|
21
|
+
/** if tree expanded */
|
|
22
|
+
treeExpanded: PrivateRowDT['__T_EXP__']
|
|
21
23
|
};
|
|
22
24
|
|
|
23
25
|
export type CustomHeaderCellProps<T extends Record<string, any>> = {
|