stk-table-vue 0.1.0 → 0.2.1
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.
- package/README.md +63 -10
- package/lib/src/StkTable/StkTable.vue.d.ts +21 -8
- package/lib/src/StkTable/index.d.ts +3 -3
- package/lib/src/StkTable/types/index.d.ts +3 -3
- package/lib/src/StkTable/useAutoResize.d.ts +14 -15
- package/lib/src/StkTable/useFixedCol.d.ts +20 -0
- package/lib/src/StkTable/useHighlight.d.ts +19 -19
- package/lib/src/StkTable/useThDrag.d.ts +4 -1
- package/lib/src/StkTable/useVirtualScroll.d.ts +1 -1
- package/lib/src/StkTable/utils.d.ts +2 -0
- package/lib/stk-table-vue.js +524 -543
- package/lib/style.css +72 -94
- package/lib/test/StkTable.browser.test.d.ts +1 -1
- package/lib/test/insertToOrderedArray.test.d.ts +1 -1
- package/lib/test/utils/DragResize.d.ts +28 -28
- package/lib/test/utils/h.d.ts +10 -10
- package/package.json +2 -2
- package/src/StkTable/StkTable.vue +54 -73
- package/src/StkTable/style.less +176 -253
- package/src/StkTable/types/index.ts +3 -3
- package/src/StkTable/useAutoResize.ts +2 -3
- package/src/StkTable/useColResize.ts +3 -3
- package/src/StkTable/useFixedCol.ts +91 -0
- package/src/StkTable/useFixedStyle.ts +4 -3
- package/src/StkTable/useHighlight.ts +2 -0
- package/src/StkTable/useThDrag.ts +37 -8
- package/src/StkTable/useVirtualScroll.ts +54 -20
- package/src/StkTable/utils.ts +9 -0
package/lib/stk-table-vue.js
CHANGED
|
@@ -20,7 +20,7 @@ try {
|
|
|
20
20
|
console.error("Cannot get Chrome version", e);
|
|
21
21
|
}
|
|
22
22
|
const Is_Legacy_Mode = _chromeVersion < 56;
|
|
23
|
-
function useAutoResize({ tableContainer, initVirtualScroll,
|
|
23
|
+
function useAutoResize({ tableContainer, initVirtualScroll, props, debounceMs }) {
|
|
24
24
|
let resizeObserver = null;
|
|
25
25
|
onMounted(() => {
|
|
26
26
|
initResizeObserver();
|
|
@@ -70,6 +70,110 @@ function useAutoResize({ tableContainer, initVirtualScroll, scrollTo, props, deb
|
|
|
70
70
|
}, debounceMs);
|
|
71
71
|
}
|
|
72
72
|
}
|
|
73
|
+
function insertToOrderedArray(sortState, newItem, targetArray) {
|
|
74
|
+
const { dataIndex, order } = sortState;
|
|
75
|
+
let { sortType } = sortState;
|
|
76
|
+
if (!sortType)
|
|
77
|
+
sortType = typeof newItem[dataIndex];
|
|
78
|
+
const data = [...targetArray];
|
|
79
|
+
if (!order) {
|
|
80
|
+
data.unshift(newItem);
|
|
81
|
+
return data;
|
|
82
|
+
}
|
|
83
|
+
let sIndex = 0;
|
|
84
|
+
let eIndex = data.length - 1;
|
|
85
|
+
const targetVal = newItem[dataIndex];
|
|
86
|
+
while (sIndex <= eIndex) {
|
|
87
|
+
const midIndex = Math.floor((sIndex + eIndex) / 2);
|
|
88
|
+
const midVal = data[midIndex][dataIndex];
|
|
89
|
+
const compareRes = strCompare(midVal, targetVal, sortType);
|
|
90
|
+
if (compareRes === 0) {
|
|
91
|
+
sIndex = midIndex;
|
|
92
|
+
break;
|
|
93
|
+
} else if (compareRes === -1) {
|
|
94
|
+
if (order === "asc")
|
|
95
|
+
sIndex = midIndex + 1;
|
|
96
|
+
else
|
|
97
|
+
eIndex = midIndex - 1;
|
|
98
|
+
} else {
|
|
99
|
+
if (order === "asc")
|
|
100
|
+
eIndex = midIndex - 1;
|
|
101
|
+
else
|
|
102
|
+
sIndex = midIndex + 1;
|
|
103
|
+
}
|
|
104
|
+
}
|
|
105
|
+
data.splice(sIndex, 0, newItem);
|
|
106
|
+
return data;
|
|
107
|
+
}
|
|
108
|
+
function strCompare(a, b, type) {
|
|
109
|
+
if (type === "number") {
|
|
110
|
+
if (+a > +b)
|
|
111
|
+
return 1;
|
|
112
|
+
else if (+a === +b)
|
|
113
|
+
return 0;
|
|
114
|
+
else
|
|
115
|
+
return -1;
|
|
116
|
+
} else {
|
|
117
|
+
return String(a).localeCompare(b);
|
|
118
|
+
}
|
|
119
|
+
}
|
|
120
|
+
function tableSort(sortOption, order, dataSource) {
|
|
121
|
+
if (!(dataSource == null ? void 0 : dataSource.length))
|
|
122
|
+
return dataSource || [];
|
|
123
|
+
let targetDataSource = [...dataSource];
|
|
124
|
+
if (typeof sortOption.sorter === "function") {
|
|
125
|
+
const customSorterData = sortOption.sorter(targetDataSource, { order, column: sortOption });
|
|
126
|
+
if (customSorterData)
|
|
127
|
+
targetDataSource = customSorterData;
|
|
128
|
+
} else if (order) {
|
|
129
|
+
const sortField = sortOption.sortField || sortOption.dataIndex;
|
|
130
|
+
let { sortType } = sortOption;
|
|
131
|
+
if (!sortType)
|
|
132
|
+
sortType = typeof dataSource[0][sortField];
|
|
133
|
+
if (sortType === "number") {
|
|
134
|
+
const nanArr = [];
|
|
135
|
+
const numArr = [];
|
|
136
|
+
for (let i = 0; i < targetDataSource.length; i++) {
|
|
137
|
+
const row = targetDataSource[i];
|
|
138
|
+
if (row[sortField] === null || row[sortField] === "" || typeof row[sortField] === "boolean" || Number.isNaN(+row[sortField])) {
|
|
139
|
+
nanArr.push(row);
|
|
140
|
+
} else {
|
|
141
|
+
numArr.push(row);
|
|
142
|
+
}
|
|
143
|
+
}
|
|
144
|
+
if (order === "asc") {
|
|
145
|
+
numArr.sort((a, b) => +a[sortField] - +b[sortField]);
|
|
146
|
+
targetDataSource = [...nanArr, ...numArr];
|
|
147
|
+
} else {
|
|
148
|
+
numArr.sort((a, b) => +b[sortField] - +a[sortField]);
|
|
149
|
+
targetDataSource = [...numArr, ...nanArr];
|
|
150
|
+
}
|
|
151
|
+
} else {
|
|
152
|
+
if (order === "asc") {
|
|
153
|
+
targetDataSource.sort((a, b) => String(a[sortField]).localeCompare(b[sortField]));
|
|
154
|
+
} else {
|
|
155
|
+
targetDataSource.sort((a, b) => String(a[sortField]).localeCompare(b[sortField]) * -1);
|
|
156
|
+
}
|
|
157
|
+
}
|
|
158
|
+
}
|
|
159
|
+
return targetDataSource;
|
|
160
|
+
}
|
|
161
|
+
function howDeepTheHeader(arr, level = 1) {
|
|
162
|
+
const levels = [level];
|
|
163
|
+
arr.forEach((item) => {
|
|
164
|
+
var _a;
|
|
165
|
+
if ((_a = item.children) == null ? void 0 : _a.length) {
|
|
166
|
+
levels.push(howDeepTheHeader(item.children, level + 1));
|
|
167
|
+
}
|
|
168
|
+
});
|
|
169
|
+
return Math.max(...levels);
|
|
170
|
+
}
|
|
171
|
+
function getColWidth(col) {
|
|
172
|
+
if (typeof (col == null ? void 0 : col.width) === "number") {
|
|
173
|
+
return Math.floor(col.width ?? Default_Col_Width);
|
|
174
|
+
}
|
|
175
|
+
return parseInt((col == null ? void 0 : col.width) ?? Default_Col_Width);
|
|
176
|
+
}
|
|
73
177
|
function useColResize({
|
|
74
178
|
tableContainer,
|
|
75
179
|
tableHeaderLast,
|
|
@@ -137,7 +241,7 @@ function useColResize({
|
|
|
137
241
|
const { lastCol, startX, startOffsetTableX } = colResizeState;
|
|
138
242
|
const { clientX } = e;
|
|
139
243
|
let moveX = clientX - startX;
|
|
140
|
-
const currentColWidth =
|
|
244
|
+
const currentColWidth = getColWidth(lastCol);
|
|
141
245
|
if (currentColWidth + moveX < props.colMinWidth) {
|
|
142
246
|
moveX = -currentColWidth;
|
|
143
247
|
}
|
|
@@ -152,7 +256,7 @@ function useColResize({
|
|
|
152
256
|
const { startX, lastCol } = colResizeState;
|
|
153
257
|
const { clientX } = e;
|
|
154
258
|
const moveX = clientX - startX;
|
|
155
|
-
let width =
|
|
259
|
+
let width = getColWidth(lastCol) + moveX;
|
|
156
260
|
if (width < props.colMinWidth)
|
|
157
261
|
width = props.colMinWidth;
|
|
158
262
|
const curCol = tableHeaderLast.value.find((it) => colKeyGen(it) === colKeyGen(lastCol));
|
|
@@ -190,6 +294,64 @@ function useColResize({
|
|
|
190
294
|
onThResizeMouseUp
|
|
191
295
|
};
|
|
192
296
|
}
|
|
297
|
+
function useFixedCol({ props, tableHeaderLast, tableContainer }) {
|
|
298
|
+
const fixedShadow = ref({
|
|
299
|
+
showL: false,
|
|
300
|
+
showR: false
|
|
301
|
+
});
|
|
302
|
+
let fixedShadowCols = [];
|
|
303
|
+
function dealFixedColShadow() {
|
|
304
|
+
if (!props.fixedColShadow)
|
|
305
|
+
return;
|
|
306
|
+
fixedShadowCols = [];
|
|
307
|
+
let lastLeftCol = null;
|
|
308
|
+
for (let i = tableHeaderLast.value.length - 1; i >= 0; i--) {
|
|
309
|
+
const col = tableHeaderLast.value[i];
|
|
310
|
+
if (col.fixed === "left") {
|
|
311
|
+
lastLeftCol = col;
|
|
312
|
+
break;
|
|
313
|
+
}
|
|
314
|
+
}
|
|
315
|
+
let node = { __PARENT__: lastLeftCol };
|
|
316
|
+
while (node = node.__PARENT__) {
|
|
317
|
+
if (node.fixed) {
|
|
318
|
+
fixedShadowCols.push(node);
|
|
319
|
+
}
|
|
320
|
+
}
|
|
321
|
+
const lastRightCol = tableHeaderLast.value.find((it) => it.fixed === "right");
|
|
322
|
+
node = { __PARENT__: lastRightCol };
|
|
323
|
+
while (node = node.__PARENT__) {
|
|
324
|
+
if (node.fixed) {
|
|
325
|
+
fixedShadowCols.push(node);
|
|
326
|
+
}
|
|
327
|
+
}
|
|
328
|
+
}
|
|
329
|
+
function getFixedColClass(col) {
|
|
330
|
+
const { showR, showL } = fixedShadow.value;
|
|
331
|
+
const showShadow = props.fixedColShadow && col.fixed && (showL && col.fixed === "left" || showR && col.fixed === "right") && fixedShadowCols.includes(col);
|
|
332
|
+
const classObj = {
|
|
333
|
+
"fixed-cell": col.fixed,
|
|
334
|
+
["fixed-cell--" + col.fixed]: col.fixed,
|
|
335
|
+
"fixed-cell--shadow": showShadow
|
|
336
|
+
};
|
|
337
|
+
return classObj;
|
|
338
|
+
}
|
|
339
|
+
function updateFixedShadow() {
|
|
340
|
+
if (!props.fixedColShadow)
|
|
341
|
+
return;
|
|
342
|
+
const { clientWidth, scrollWidth, scrollLeft } = tableContainer.value;
|
|
343
|
+
fixedShadow.value.showL = Boolean(scrollLeft);
|
|
344
|
+
fixedShadow.value.showR = Math.abs(scrollWidth - scrollLeft - clientWidth) > 0.5;
|
|
345
|
+
}
|
|
346
|
+
return {
|
|
347
|
+
/** 固定列class */
|
|
348
|
+
getFixedColClass,
|
|
349
|
+
/** 处理固定列阴影 */
|
|
350
|
+
dealFixedColShadow,
|
|
351
|
+
/** 滚动条变化时,更新需要展示阴影的列 */
|
|
352
|
+
updateFixedShadow
|
|
353
|
+
};
|
|
354
|
+
}
|
|
193
355
|
function useFixedStyle({ props, tableHeaderLast, virtualScroll, virtualScrollX, virtualX_on, virtualX_offsetRight }) {
|
|
194
356
|
const fixedColumnsPositionStore = computed(() => {
|
|
195
357
|
const store = {};
|
|
@@ -200,7 +362,7 @@ function useFixedStyle({ props, tableHeaderLast, virtualScroll, virtualScrollX,
|
|
|
200
362
|
const item = cols[i];
|
|
201
363
|
if (item.fixed === "left") {
|
|
202
364
|
store[item.dataIndex] = left;
|
|
203
|
-
left +=
|
|
365
|
+
left += getColWidth(item);
|
|
204
366
|
}
|
|
205
367
|
if (!rightStartIndex && item.fixed === "right") {
|
|
206
368
|
rightStartIndex = i;
|
|
@@ -211,7 +373,7 @@ function useFixedStyle({ props, tableHeaderLast, virtualScroll, virtualScrollX,
|
|
|
211
373
|
const item = cols[i];
|
|
212
374
|
if (item.fixed === "right") {
|
|
213
375
|
store[item.dataIndex] = right;
|
|
214
|
-
right +=
|
|
376
|
+
right += getColWidth(item);
|
|
215
377
|
}
|
|
216
378
|
}
|
|
217
379
|
return store;
|
|
@@ -413,37 +575,59 @@ function useKeyboardArrowScroll(targetElement, { props, scrollTo, virtualScroll,
|
|
|
413
575
|
isMouseOver = true;
|
|
414
576
|
}
|
|
415
577
|
}
|
|
416
|
-
function useThDrag({ emits }) {
|
|
578
|
+
function useThDrag({ props, emits }) {
|
|
417
579
|
let dragStartKey = void 0;
|
|
580
|
+
function findParentTH(el) {
|
|
581
|
+
let n = el;
|
|
582
|
+
while (n) {
|
|
583
|
+
if (n.tagName === "TH")
|
|
584
|
+
return n;
|
|
585
|
+
n = n.parentElement;
|
|
586
|
+
}
|
|
587
|
+
}
|
|
418
588
|
function onThDragStart(e) {
|
|
419
|
-
|
|
589
|
+
const th = findParentTH(e.target);
|
|
590
|
+
if (!th)
|
|
591
|
+
return;
|
|
592
|
+
dragStartKey = th.dataset.colKey;
|
|
420
593
|
emits("th-drag-start", dragStartKey);
|
|
421
594
|
}
|
|
422
595
|
function onThDragOver(e) {
|
|
596
|
+
const th = findParentTH(e.target);
|
|
597
|
+
if (!th)
|
|
598
|
+
return;
|
|
599
|
+
const isHeaderDraggable2 = th.getAttribute("draggable") === "true";
|
|
600
|
+
if (!isHeaderDraggable2) {
|
|
601
|
+
return;
|
|
602
|
+
}
|
|
423
603
|
e.preventDefault();
|
|
424
604
|
}
|
|
425
605
|
function onThDrop(e) {
|
|
426
|
-
|
|
427
|
-
|
|
428
|
-
|
|
429
|
-
break;
|
|
430
|
-
th = th.parentNode;
|
|
431
|
-
}
|
|
606
|
+
const th = findParentTH(e.target);
|
|
607
|
+
if (!th)
|
|
608
|
+
return;
|
|
432
609
|
if (dragStartKey !== th.dataset.colKey) {
|
|
433
610
|
emits("col-order-change", dragStartKey, th.dataset.colKey);
|
|
434
611
|
}
|
|
435
612
|
emits("th-drop", th.dataset.colKey);
|
|
436
613
|
}
|
|
614
|
+
const isHeaderDragFun = typeof props.headerDrag === "function";
|
|
615
|
+
function isHeaderDraggable(col) {
|
|
616
|
+
if (isHeaderDragFun) {
|
|
617
|
+
return props.headerDrag(col);
|
|
618
|
+
} else {
|
|
619
|
+
return props.headerDrag;
|
|
620
|
+
}
|
|
621
|
+
}
|
|
437
622
|
return {
|
|
438
623
|
onThDragStart,
|
|
439
624
|
onThDragOver,
|
|
440
|
-
onThDrop
|
|
625
|
+
onThDrop,
|
|
626
|
+
isHeaderDraggable
|
|
441
627
|
};
|
|
442
628
|
}
|
|
443
|
-
|
|
444
|
-
|
|
445
|
-
}
|
|
446
|
-
function useVirtualScroll({ tableContainer, props, dataSourceCopy, tableHeaderLast }) {
|
|
629
|
+
const VUE2_SCROLL_TIMEOUT_MS = 200;
|
|
630
|
+
function useVirtualScroll({ props, tableContainer, dataSourceCopy, tableHeaderLast }) {
|
|
447
631
|
const virtualScroll = ref({
|
|
448
632
|
containerHeight: 0,
|
|
449
633
|
rowHeight: props.rowHeight,
|
|
@@ -476,7 +660,7 @@ function useVirtualScroll({ tableContainer, props, dataSourceCopy, tableHeaderLa
|
|
|
476
660
|
return (dataSourceCopy.value.length - startIndex - virtual_dataSourcePart.value.length) * rowHeight;
|
|
477
661
|
});
|
|
478
662
|
const virtualX_on = computed(() => {
|
|
479
|
-
return props.virtualX && tableHeaderLast.value.reduce((sum, col) => sum +=
|
|
663
|
+
return props.virtualX && tableHeaderLast.value.reduce((sum, col) => sum += getColWidth(col), 0) > virtualScrollX.value.containerWidth + 100;
|
|
480
664
|
});
|
|
481
665
|
const virtualX_columnPart = computed(() => {
|
|
482
666
|
if (virtualX_on.value) {
|
|
@@ -505,7 +689,7 @@ function useVirtualScroll({ tableContainer, props, dataSourceCopy, tableHeaderLa
|
|
|
505
689
|
for (let i = virtualScrollX.value.endIndex; i < tableHeaderLast.value.length; i++) {
|
|
506
690
|
const col = tableHeaderLast.value[i];
|
|
507
691
|
if (col.fixed !== "right") {
|
|
508
|
-
width +=
|
|
692
|
+
width += getColWidth(col);
|
|
509
693
|
}
|
|
510
694
|
}
|
|
511
695
|
return width;
|
|
@@ -539,23 +723,37 @@ function useVirtualScroll({ tableContainer, props, dataSourceCopy, tableHeaderLa
|
|
|
539
723
|
initVirtualScrollY(height);
|
|
540
724
|
initVirtualScrollX();
|
|
541
725
|
}
|
|
726
|
+
let vue2ScrollYTimeout = null;
|
|
542
727
|
function updateVirtualScrollY(sTop = 0) {
|
|
543
|
-
const { rowHeight, pageSize } = virtualScroll.value;
|
|
728
|
+
const { rowHeight, pageSize, scrollTop, startIndex: oldStartIndex } = virtualScroll.value;
|
|
544
729
|
const startIndex = Math.floor(sTop / rowHeight);
|
|
730
|
+
const offsetTop = startIndex * rowHeight;
|
|
545
731
|
let endIndex = startIndex + pageSize;
|
|
546
732
|
if (endIndex > dataSourceCopy.value.length) {
|
|
547
733
|
endIndex = dataSourceCopy.value.length;
|
|
548
734
|
}
|
|
549
|
-
|
|
550
|
-
|
|
551
|
-
|
|
552
|
-
|
|
553
|
-
|
|
554
|
-
|
|
735
|
+
if (vue2ScrollYTimeout) {
|
|
736
|
+
window.clearTimeout(vue2ScrollYTimeout);
|
|
737
|
+
}
|
|
738
|
+
if (!props.optimizeVue2Scroll || sTop <= scrollTop || Math.abs(oldStartIndex - startIndex) >= pageSize) {
|
|
739
|
+
Object.assign(virtualScroll.value, {
|
|
740
|
+
startIndex,
|
|
741
|
+
offsetTop,
|
|
742
|
+
endIndex,
|
|
743
|
+
scrollTop: sTop
|
|
744
|
+
});
|
|
745
|
+
} else {
|
|
746
|
+
Object.assign(virtualScroll.value, { endIndex, scrollTop: sTop });
|
|
747
|
+
vue2ScrollYTimeout = window.setTimeout(() => {
|
|
748
|
+
Object.assign(virtualScroll.value, { startIndex, offsetTop });
|
|
749
|
+
}, VUE2_SCROLL_TIMEOUT_MS);
|
|
750
|
+
}
|
|
555
751
|
}
|
|
752
|
+
let vue2ScrollXTimeout = null;
|
|
556
753
|
function updateVirtualScrollX(sLeft = 0) {
|
|
557
754
|
var _a;
|
|
558
755
|
const headerLength = (_a = tableHeaderLast.value) == null ? void 0 : _a.length;
|
|
756
|
+
const { scrollLeft } = virtualScrollX.value;
|
|
559
757
|
if (!headerLength)
|
|
560
758
|
return;
|
|
561
759
|
let startIndex = 0;
|
|
@@ -566,7 +764,7 @@ function useVirtualScroll({ tableContainer, props, dataSourceCopy, tableHeaderLa
|
|
|
566
764
|
const col = tableHeaderLast.value[colIndex];
|
|
567
765
|
if (col.fixed === "left")
|
|
568
766
|
continue;
|
|
569
|
-
const colWidth =
|
|
767
|
+
const colWidth = getColWidth(col);
|
|
570
768
|
colWidthSum += colWidth;
|
|
571
769
|
if (colWidthSum >= sLeft) {
|
|
572
770
|
offsetLeft = colWidthSum - colWidth;
|
|
@@ -576,9 +774,9 @@ function useVirtualScroll({ tableContainer, props, dataSourceCopy, tableHeaderLa
|
|
|
576
774
|
}
|
|
577
775
|
colWidthSum = 0;
|
|
578
776
|
let endIndex = headerLength;
|
|
579
|
-
for (let colIndex = startIndex; colIndex < headerLength; colIndex++) {
|
|
777
|
+
for (let colIndex = startIndex + 1; colIndex < headerLength; colIndex++) {
|
|
580
778
|
const col = tableHeaderLast.value[colIndex];
|
|
581
|
-
colWidthSum +=
|
|
779
|
+
colWidthSum += getColWidth(col);
|
|
582
780
|
if (colWidthSum >= virtualScrollX.value.containerWidth) {
|
|
583
781
|
endIndex = colIndex + 1;
|
|
584
782
|
break;
|
|
@@ -587,7 +785,17 @@ function useVirtualScroll({ tableContainer, props, dataSourceCopy, tableHeaderLa
|
|
|
587
785
|
if (endIndex > headerLength) {
|
|
588
786
|
endIndex = headerLength;
|
|
589
787
|
}
|
|
590
|
-
|
|
788
|
+
if (vue2ScrollXTimeout) {
|
|
789
|
+
window.clearTimeout(vue2ScrollXTimeout);
|
|
790
|
+
}
|
|
791
|
+
if (!props.optimizeVue2Scroll || sLeft <= scrollLeft) {
|
|
792
|
+
Object.assign(virtualScrollX.value, { startIndex, endIndex, offsetLeft, scrollLeft: sLeft });
|
|
793
|
+
} else {
|
|
794
|
+
Object.assign(virtualScrollX.value, { endIndex, scrollLeft: sLeft });
|
|
795
|
+
vue2ScrollXTimeout = window.setTimeout(() => {
|
|
796
|
+
Object.assign(virtualScrollX.value, { startIndex, offsetLeft });
|
|
797
|
+
}, VUE2_SCROLL_TIMEOUT_MS);
|
|
798
|
+
}
|
|
591
799
|
}
|
|
592
800
|
return {
|
|
593
801
|
virtualScroll,
|
|
@@ -605,114 +813,10 @@ function useVirtualScroll({ tableContainer, props, dataSourceCopy, tableHeaderLa
|
|
|
605
813
|
updateVirtualScrollX
|
|
606
814
|
};
|
|
607
815
|
}
|
|
608
|
-
|
|
609
|
-
const { dataIndex, order } = sortState;
|
|
610
|
-
let { sortType } = sortState;
|
|
611
|
-
if (!sortType)
|
|
612
|
-
sortType = typeof newItem[dataIndex];
|
|
613
|
-
const data = [...targetArray];
|
|
614
|
-
if (!order) {
|
|
615
|
-
data.unshift(newItem);
|
|
616
|
-
return data;
|
|
617
|
-
}
|
|
618
|
-
let sIndex = 0;
|
|
619
|
-
let eIndex = data.length - 1;
|
|
620
|
-
const targetVal = newItem[dataIndex];
|
|
621
|
-
while (sIndex <= eIndex) {
|
|
622
|
-
const midIndex = Math.floor((sIndex + eIndex) / 2);
|
|
623
|
-
const midVal = data[midIndex][dataIndex];
|
|
624
|
-
const compareRes = strCompare(midVal, targetVal, sortType);
|
|
625
|
-
if (compareRes === 0) {
|
|
626
|
-
sIndex = midIndex;
|
|
627
|
-
break;
|
|
628
|
-
} else if (compareRes === -1) {
|
|
629
|
-
if (order === "asc")
|
|
630
|
-
sIndex = midIndex + 1;
|
|
631
|
-
else
|
|
632
|
-
eIndex = midIndex - 1;
|
|
633
|
-
} else {
|
|
634
|
-
if (order === "asc")
|
|
635
|
-
eIndex = midIndex - 1;
|
|
636
|
-
else
|
|
637
|
-
sIndex = midIndex + 1;
|
|
638
|
-
}
|
|
639
|
-
}
|
|
640
|
-
data.splice(sIndex, 0, newItem);
|
|
641
|
-
return data;
|
|
642
|
-
}
|
|
643
|
-
function strCompare(a, b, type) {
|
|
644
|
-
if (type === "number") {
|
|
645
|
-
if (+a > +b)
|
|
646
|
-
return 1;
|
|
647
|
-
else if (+a === +b)
|
|
648
|
-
return 0;
|
|
649
|
-
else
|
|
650
|
-
return -1;
|
|
651
|
-
} else {
|
|
652
|
-
return String(a).localeCompare(b);
|
|
653
|
-
}
|
|
654
|
-
}
|
|
655
|
-
function tableSort(sortOption, order, dataSource) {
|
|
656
|
-
if (!(dataSource == null ? void 0 : dataSource.length))
|
|
657
|
-
return dataSource || [];
|
|
658
|
-
let targetDataSource = [...dataSource];
|
|
659
|
-
if (typeof sortOption.sorter === "function") {
|
|
660
|
-
const customSorterData = sortOption.sorter(targetDataSource, { order, column: sortOption });
|
|
661
|
-
if (customSorterData)
|
|
662
|
-
targetDataSource = customSorterData;
|
|
663
|
-
} else if (order) {
|
|
664
|
-
const sortField = sortOption.sortField || sortOption.dataIndex;
|
|
665
|
-
let { sortType } = sortOption;
|
|
666
|
-
if (!sortType)
|
|
667
|
-
sortType = typeof dataSource[0][sortField];
|
|
668
|
-
if (sortType === "number") {
|
|
669
|
-
const nanArr = [];
|
|
670
|
-
const numArr = [];
|
|
671
|
-
for (let i = 0; i < targetDataSource.length; i++) {
|
|
672
|
-
const row = targetDataSource[i];
|
|
673
|
-
if (row[sortField] === null || row[sortField] === "" || typeof row[sortField] === "boolean" || Number.isNaN(+row[sortField])) {
|
|
674
|
-
nanArr.push(row);
|
|
675
|
-
} else {
|
|
676
|
-
numArr.push(row);
|
|
677
|
-
}
|
|
678
|
-
}
|
|
679
|
-
if (order === "asc") {
|
|
680
|
-
numArr.sort((a, b) => +a[sortField] - +b[sortField]);
|
|
681
|
-
targetDataSource = [...nanArr, ...numArr];
|
|
682
|
-
} else {
|
|
683
|
-
numArr.sort((a, b) => +b[sortField] - +a[sortField]);
|
|
684
|
-
targetDataSource = [...numArr, ...nanArr];
|
|
685
|
-
}
|
|
686
|
-
} else {
|
|
687
|
-
if (order === "asc") {
|
|
688
|
-
targetDataSource.sort((a, b) => String(a[sortField]).localeCompare(b[sortField]));
|
|
689
|
-
} else {
|
|
690
|
-
targetDataSource.sort((a, b) => String(a[sortField]).localeCompare(b[sortField]) * -1);
|
|
691
|
-
}
|
|
692
|
-
}
|
|
693
|
-
}
|
|
694
|
-
return targetDataSource;
|
|
695
|
-
}
|
|
696
|
-
function howDeepTheHeader(arr, level = 1) {
|
|
697
|
-
const levels = [level];
|
|
698
|
-
arr.forEach((item) => {
|
|
699
|
-
var _a;
|
|
700
|
-
if ((_a = item.children) == null ? void 0 : _a.length) {
|
|
701
|
-
levels.push(howDeepTheHeader(item.children, level + 1));
|
|
702
|
-
}
|
|
703
|
-
});
|
|
704
|
-
return Math.max(...levels);
|
|
705
|
-
}
|
|
706
|
-
const _hoisted_1 = {
|
|
707
|
-
key: 0
|
|
708
|
-
};
|
|
816
|
+
const _hoisted_1 = { key: 0 };
|
|
709
817
|
const _hoisted_2 = ["data-col-key", "draggable", "rowspan", "colspan", "title", "onClick"];
|
|
710
|
-
const _hoisted_3 = {
|
|
711
|
-
|
|
712
|
-
};
|
|
713
|
-
const _hoisted_4 = {
|
|
714
|
-
class: "table-header-title"
|
|
715
|
-
};
|
|
818
|
+
const _hoisted_3 = { class: "table-header-cell-wrapper" };
|
|
819
|
+
const _hoisted_4 = { class: "table-header-title" };
|
|
716
820
|
const _hoisted_5 = {
|
|
717
821
|
key: 2,
|
|
718
822
|
class: "table-header-sorter"
|
|
@@ -722,155 +826,78 @@ const _hoisted_6 = /* @__PURE__ */ createElementVNode("svg", {
|
|
|
722
826
|
width: "16px",
|
|
723
827
|
height: "16px",
|
|
724
828
|
viewBox: "0 0 16 16"
|
|
725
|
-
}, [
|
|
726
|
-
|
|
727
|
-
|
|
728
|
-
|
|
729
|
-
|
|
730
|
-
|
|
731
|
-
|
|
732
|
-
|
|
733
|
-
|
|
734
|
-
|
|
829
|
+
}, [
|
|
830
|
+
/* @__PURE__ */ createElementVNode("polygon", {
|
|
831
|
+
class: "arrow-up",
|
|
832
|
+
fill: "#757699",
|
|
833
|
+
points: "8 2 4.8 6 11.2 6"
|
|
834
|
+
}),
|
|
835
|
+
/* @__PURE__ */ createElementVNode("polygon", {
|
|
836
|
+
class: "arrow-down",
|
|
837
|
+
transform: "translate(8, 12) rotate(-180) translate(-8, -12) ",
|
|
838
|
+
points: "8 10 4.8 14 11.2 14"
|
|
839
|
+
})
|
|
840
|
+
], -1);
|
|
841
|
+
const _hoisted_7 = [
|
|
842
|
+
_hoisted_6
|
|
843
|
+
];
|
|
735
844
|
const _hoisted_8 = ["onMousedown"];
|
|
736
845
|
const _hoisted_9 = ["onMousedown"];
|
|
737
846
|
const _hoisted_10 = {
|
|
738
847
|
key: 0,
|
|
739
848
|
class: "virtual-x-left",
|
|
740
|
-
style: {
|
|
741
|
-
"padding": "0"
|
|
742
|
-
}
|
|
849
|
+
style: { "padding": "0" }
|
|
743
850
|
};
|
|
744
851
|
const _hoisted_11 = ["data-row-key", "onClick", "onDblclick", "onContextmenu", "onMouseover"];
|
|
745
852
|
const _hoisted_12 = {
|
|
746
853
|
key: 0,
|
|
747
854
|
class: "virtual-x-left",
|
|
748
|
-
style: {
|
|
749
|
-
"padding": "0"
|
|
750
|
-
}
|
|
855
|
+
style: { "padding": "0" }
|
|
751
856
|
};
|
|
752
857
|
const _hoisted_13 = ["data-index", "onClick"];
|
|
753
858
|
const _hoisted_14 = ["title"];
|
|
754
859
|
const _sfc_main = /* @__PURE__ */ defineComponent({
|
|
755
860
|
__name: "StkTable",
|
|
756
861
|
props: {
|
|
757
|
-
width: {
|
|
758
|
-
|
|
759
|
-
},
|
|
760
|
-
|
|
761
|
-
|
|
762
|
-
},
|
|
763
|
-
|
|
764
|
-
|
|
765
|
-
},
|
|
766
|
-
|
|
767
|
-
|
|
768
|
-
|
|
769
|
-
},
|
|
770
|
-
|
|
771
|
-
|
|
772
|
-
|
|
773
|
-
},
|
|
774
|
-
|
|
775
|
-
|
|
776
|
-
|
|
777
|
-
},
|
|
778
|
-
|
|
779
|
-
|
|
780
|
-
},
|
|
781
|
-
|
|
782
|
-
|
|
783
|
-
},
|
|
784
|
-
|
|
785
|
-
|
|
786
|
-
}
|
|
787
|
-
virtual: {
|
|
788
|
-
type: Boolean,
|
|
789
|
-
default: false
|
|
790
|
-
},
|
|
791
|
-
virtualX: {
|
|
792
|
-
type: Boolean,
|
|
793
|
-
default: false
|
|
794
|
-
},
|
|
795
|
-
columns: {
|
|
796
|
-
default: () => []
|
|
797
|
-
},
|
|
798
|
-
dataSource: {
|
|
799
|
-
default: () => []
|
|
800
|
-
},
|
|
801
|
-
rowKey: {
|
|
802
|
-
type: [String, Function],
|
|
803
|
-
default: ""
|
|
804
|
-
},
|
|
805
|
-
colKey: {
|
|
806
|
-
type: [String, Function],
|
|
807
|
-
default: "dataIndex"
|
|
808
|
-
},
|
|
809
|
-
emptyCellText: {
|
|
810
|
-
default: "--"
|
|
811
|
-
},
|
|
812
|
-
noDataFull: {
|
|
813
|
-
type: Boolean,
|
|
814
|
-
default: false
|
|
815
|
-
},
|
|
816
|
-
showNoData: {
|
|
817
|
-
type: Boolean,
|
|
818
|
-
default: true
|
|
819
|
-
},
|
|
820
|
-
sortRemote: {
|
|
821
|
-
type: Boolean,
|
|
822
|
-
default: false
|
|
823
|
-
},
|
|
824
|
-
showHeaderOverflow: {
|
|
825
|
-
type: Boolean,
|
|
826
|
-
default: false
|
|
827
|
-
},
|
|
828
|
-
showOverflow: {
|
|
829
|
-
type: Boolean,
|
|
830
|
-
default: false
|
|
831
|
-
},
|
|
832
|
-
showTrHoverClass: {
|
|
833
|
-
type: Boolean,
|
|
834
|
-
default: false
|
|
835
|
-
},
|
|
836
|
-
headerDrag: {
|
|
837
|
-
type: Boolean,
|
|
838
|
-
default: false
|
|
839
|
-
},
|
|
840
|
-
rowClassName: {
|
|
841
|
-
type: Function,
|
|
842
|
-
default: () => ""
|
|
843
|
-
},
|
|
844
|
-
colResizable: {
|
|
845
|
-
type: Boolean,
|
|
846
|
-
default: false
|
|
847
|
-
},
|
|
848
|
-
colMinWidth: {
|
|
849
|
-
default: 10
|
|
850
|
-
},
|
|
851
|
-
bordered: {
|
|
852
|
-
type: [Boolean, String],
|
|
853
|
-
default: true
|
|
854
|
-
},
|
|
855
|
-
autoResize: {
|
|
856
|
-
type: [Boolean, Function],
|
|
857
|
-
default: true
|
|
858
|
-
},
|
|
859
|
-
fixedColShadow: {
|
|
860
|
-
type: Boolean,
|
|
861
|
-
default: false
|
|
862
|
-
}
|
|
862
|
+
width: { default: "" },
|
|
863
|
+
minWidth: { default: "" },
|
|
864
|
+
maxWidth: { default: "" },
|
|
865
|
+
stripe: { type: Boolean, default: false },
|
|
866
|
+
fixedMode: { type: Boolean, default: false },
|
|
867
|
+
headless: { type: Boolean, default: false },
|
|
868
|
+
theme: { default: "light" },
|
|
869
|
+
rowHeight: { default: Default_Row_Height },
|
|
870
|
+
headerRowHeight: { default: null },
|
|
871
|
+
virtual: { type: Boolean, default: false },
|
|
872
|
+
virtualX: { type: Boolean, default: false },
|
|
873
|
+
columns: { default: () => [] },
|
|
874
|
+
dataSource: { default: () => [] },
|
|
875
|
+
rowKey: { type: [String, Function], default: "" },
|
|
876
|
+
colKey: { type: [String, Function], default: "dataIndex" },
|
|
877
|
+
emptyCellText: { default: "--" },
|
|
878
|
+
noDataFull: { type: Boolean, default: false },
|
|
879
|
+
showNoData: { type: Boolean, default: true },
|
|
880
|
+
sortRemote: { type: Boolean, default: false },
|
|
881
|
+
showHeaderOverflow: { type: Boolean, default: false },
|
|
882
|
+
showOverflow: { type: Boolean, default: false },
|
|
883
|
+
showTrHoverClass: { type: Boolean, default: false },
|
|
884
|
+
headerDrag: { type: [Boolean, Function], default: false },
|
|
885
|
+
rowClassName: { type: Function, default: () => "" },
|
|
886
|
+
colResizable: { type: Boolean, default: false },
|
|
887
|
+
colMinWidth: { default: 10 },
|
|
888
|
+
bordered: { type: [Boolean, String], default: true },
|
|
889
|
+
autoResize: { type: [Boolean, Function], default: true },
|
|
890
|
+
fixedColShadow: { type: Boolean, default: false },
|
|
891
|
+
optimizeVue2Scroll: { type: Boolean, default: false }
|
|
863
892
|
},
|
|
864
893
|
emits: ["sort-change", "row-click", "current-change", "row-dblclick", "header-row-menu", "row-menu", "cell-click", "header-cell-click", "scroll", "scroll-x", "col-order-change", "th-drag-start", "th-drop", "update:columns"],
|
|
865
|
-
setup(__props, {
|
|
866
|
-
expose: __expose,
|
|
867
|
-
emit: __emit
|
|
868
|
-
}) {
|
|
894
|
+
setup(__props, { expose: __expose, emit: __emit }) {
|
|
869
895
|
const props = __props;
|
|
870
896
|
const emits = __emit;
|
|
871
897
|
const tableContainer = ref();
|
|
872
898
|
const colResizeIndicator = ref();
|
|
873
899
|
const currentItem = ref(null);
|
|
900
|
+
const currentItemKey = ref(null);
|
|
874
901
|
const currentHover = ref(null);
|
|
875
902
|
let sortCol = ref();
|
|
876
903
|
let sortOrderIndex = ref(0);
|
|
@@ -878,19 +905,8 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
|
|
|
878
905
|
const tableHeaders = ref([]);
|
|
879
906
|
const tableHeaderLast = ref([]);
|
|
880
907
|
const dataSourceCopy = shallowRef([...props.dataSource]);
|
|
881
|
-
const fixedShadow = ref({
|
|
882
|
-
/** 是否展示左侧固定列阴影 */
|
|
883
|
-
showL: false,
|
|
884
|
-
/** 是否展示右侧固定列阴影 */
|
|
885
|
-
showR: false,
|
|
886
|
-
/** 保存需要出现阴影的列 */
|
|
887
|
-
cols: []
|
|
888
|
-
});
|
|
889
908
|
const rowKeyGenStore = /* @__PURE__ */ new WeakMap();
|
|
890
|
-
const {
|
|
891
|
-
isColResizing,
|
|
892
|
-
onThResizeMouseDown
|
|
893
|
-
} = useColResize({
|
|
909
|
+
const { isColResizing, onThResizeMouseDown } = useColResize({
|
|
894
910
|
props,
|
|
895
911
|
emits,
|
|
896
912
|
colKeyGen,
|
|
@@ -898,13 +914,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
|
|
|
898
914
|
tableContainer,
|
|
899
915
|
tableHeaderLast
|
|
900
916
|
});
|
|
901
|
-
const {
|
|
902
|
-
onThDragStart,
|
|
903
|
-
onThDragOver,
|
|
904
|
-
onThDrop
|
|
905
|
-
} = useThDrag({
|
|
906
|
-
emits
|
|
907
|
-
});
|
|
917
|
+
const { onThDragStart, onThDragOver, onThDrop, isHeaderDraggable } = useThDrag({ props, emits });
|
|
908
918
|
const {
|
|
909
919
|
virtualScroll,
|
|
910
920
|
virtualScrollX,
|
|
@@ -919,15 +929,8 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
|
|
|
919
929
|
initVirtualScrollX,
|
|
920
930
|
updateVirtualScrollY,
|
|
921
931
|
updateVirtualScrollX
|
|
922
|
-
} = useVirtualScroll({
|
|
923
|
-
|
|
924
|
-
props,
|
|
925
|
-
dataSourceCopy,
|
|
926
|
-
tableHeaderLast
|
|
927
|
-
});
|
|
928
|
-
const {
|
|
929
|
-
getFixedStyle
|
|
930
|
-
} = useFixedStyle({
|
|
932
|
+
} = useVirtualScroll({ tableContainer, props, dataSourceCopy, tableHeaderLast });
|
|
933
|
+
const { getFixedStyle } = useFixedStyle({
|
|
931
934
|
props,
|
|
932
935
|
tableHeaderLast,
|
|
933
936
|
virtualScroll,
|
|
@@ -935,22 +938,9 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
|
|
|
935
938
|
virtualX_on,
|
|
936
939
|
virtualX_offsetRight
|
|
937
940
|
});
|
|
938
|
-
const {
|
|
939
|
-
setHighlightDimCell,
|
|
940
|
-
setHighlightDimRow
|
|
941
|
-
} = useHighlight({
|
|
942
|
-
props,
|
|
943
|
-
tableContainer,
|
|
944
|
-
rowKeyGen
|
|
945
|
-
});
|
|
941
|
+
const { setHighlightDimCell, setHighlightDimRow } = useHighlight({ props, tableContainer, rowKeyGen });
|
|
946
942
|
if (props.autoResize) {
|
|
947
|
-
useAutoResize({
|
|
948
|
-
tableContainer,
|
|
949
|
-
initVirtualScroll,
|
|
950
|
-
scrollTo,
|
|
951
|
-
props,
|
|
952
|
-
debounceMs: 500
|
|
953
|
-
});
|
|
943
|
+
useAutoResize({ tableContainer, initVirtualScroll, props, debounceMs: 200 });
|
|
954
944
|
}
|
|
955
945
|
useKeyboardArrowScroll(tableContainer, {
|
|
956
946
|
props,
|
|
@@ -959,31 +949,44 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
|
|
|
959
949
|
virtualScrollX,
|
|
960
950
|
tableHeaders
|
|
961
951
|
});
|
|
962
|
-
|
|
963
|
-
|
|
964
|
-
|
|
952
|
+
const { getFixedColClass, dealFixedColShadow, updateFixedShadow } = useFixedCol({
|
|
953
|
+
props,
|
|
954
|
+
tableContainer,
|
|
955
|
+
tableHeaderLast
|
|
965
956
|
});
|
|
966
|
-
|
|
967
|
-
|
|
968
|
-
|
|
969
|
-
|
|
970
|
-
|
|
971
|
-
}
|
|
972
|
-
let needInitVirtualScrollY = false;
|
|
973
|
-
if (dataSourceCopy.value.length !== val.length) {
|
|
974
|
-
needInitVirtualScrollY = true;
|
|
957
|
+
watch(
|
|
958
|
+
() => props.columns,
|
|
959
|
+
() => {
|
|
960
|
+
dealColumns();
|
|
961
|
+
initVirtualScrollX();
|
|
975
962
|
}
|
|
976
|
-
|
|
977
|
-
|
|
978
|
-
|
|
979
|
-
|
|
980
|
-
|
|
981
|
-
|
|
963
|
+
);
|
|
964
|
+
dealColumns();
|
|
965
|
+
watch(
|
|
966
|
+
() => props.dataSource,
|
|
967
|
+
(val) => {
|
|
968
|
+
if (!val) {
|
|
969
|
+
console.warn("invalid dataSource");
|
|
970
|
+
return;
|
|
971
|
+
}
|
|
972
|
+
let needInitVirtualScrollY = false;
|
|
973
|
+
if (dataSourceCopy.value.length !== val.length) {
|
|
974
|
+
needInitVirtualScrollY = true;
|
|
975
|
+
}
|
|
976
|
+
dataSourceCopy.value = [...val];
|
|
977
|
+
if (needInitVirtualScrollY)
|
|
978
|
+
initVirtualScrollY();
|
|
979
|
+
if (sortCol.value) {
|
|
980
|
+
const column = tableHeaderLast.value.find((it) => it.dataIndex === sortCol.value);
|
|
981
|
+
onColumnSort(column, false);
|
|
982
|
+
}
|
|
983
|
+
updateFixedShadow();
|
|
984
|
+
},
|
|
985
|
+
{
|
|
986
|
+
deep: false
|
|
982
987
|
}
|
|
983
|
-
|
|
984
|
-
|
|
985
|
-
deep: false
|
|
986
|
-
});
|
|
988
|
+
);
|
|
989
|
+
watch(() => props.fixedColShadow, dealFixedColShadow);
|
|
987
990
|
onMounted(() => {
|
|
988
991
|
initVirtualScroll();
|
|
989
992
|
updateFixedShadow();
|
|
@@ -1032,50 +1035,9 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
|
|
|
1032
1035
|
tableHeaderLast.value = tempHeaderLast;
|
|
1033
1036
|
dealFixedColShadow();
|
|
1034
1037
|
}
|
|
1035
|
-
function dealFixedColShadow() {
|
|
1036
|
-
if (!props.fixedColShadow)
|
|
1037
|
-
return;
|
|
1038
|
-
fixedShadow.value.cols = [];
|
|
1039
|
-
const lastLeftCol = tableHeaderLast.value.findLast((it) => it.fixed === "left");
|
|
1040
|
-
const lastRightCol = tableHeaderLast.value.find((it) => it.fixed === "right");
|
|
1041
|
-
let node = {
|
|
1042
|
-
__PARENT__: lastLeftCol
|
|
1043
|
-
};
|
|
1044
|
-
while (node = node.__PARENT__) {
|
|
1045
|
-
if (node.fixed) {
|
|
1046
|
-
fixedShadow.value.cols.push(node);
|
|
1047
|
-
}
|
|
1048
|
-
}
|
|
1049
|
-
node = {
|
|
1050
|
-
__PARENT__: lastRightCol
|
|
1051
|
-
};
|
|
1052
|
-
while (node = node.__PARENT__) {
|
|
1053
|
-
if (node.fixed) {
|
|
1054
|
-
fixedShadow.value.cols.push(node);
|
|
1055
|
-
}
|
|
1056
|
-
}
|
|
1057
|
-
}
|
|
1058
|
-
function getFixedColClass(col) {
|
|
1059
|
-
const {
|
|
1060
|
-
showR,
|
|
1061
|
-
showL,
|
|
1062
|
-
cols
|
|
1063
|
-
} = fixedShadow.value;
|
|
1064
|
-
const classArr = [col.fixed ? "fixed-cell" : "", col.fixed ? "fixed-cell--" + col.fixed : "", props.fixedColShadow && col.fixed && (showL && col.fixed === "left" || showR && col.fixed === "right") && cols.includes(col) ? "fixed-cell--shadow" : ""];
|
|
1065
|
-
return classArr;
|
|
1066
|
-
}
|
|
1067
|
-
function updateFixedShadow() {
|
|
1068
|
-
if (!props.fixedColShadow)
|
|
1069
|
-
return;
|
|
1070
|
-
const {
|
|
1071
|
-
clientWidth,
|
|
1072
|
-
scrollWidth,
|
|
1073
|
-
scrollLeft
|
|
1074
|
-
} = tableContainer.value;
|
|
1075
|
-
fixedShadow.value.showL = Boolean(scrollLeft);
|
|
1076
|
-
fixedShadow.value.showR = Math.abs(scrollWidth - scrollLeft - clientWidth) > 0.5;
|
|
1077
|
-
}
|
|
1078
1038
|
function rowKeyGen(row) {
|
|
1039
|
+
if (!row)
|
|
1040
|
+
return;
|
|
1079
1041
|
let key = rowKeyGenStore.get(row);
|
|
1080
1042
|
if (!key) {
|
|
1081
1043
|
key = typeof props.rowKey === "function" ? props.rowKey(row) : row[props.rowKey];
|
|
@@ -1116,11 +1078,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
|
|
|
1116
1078
|
function onColumnSort(col, click = true, options = {}) {
|
|
1117
1079
|
if (!(col == null ? void 0 : col.sorter))
|
|
1118
1080
|
return;
|
|
1119
|
-
options = {
|
|
1120
|
-
force: false,
|
|
1121
|
-
emit: false,
|
|
1122
|
-
...options
|
|
1123
|
-
};
|
|
1081
|
+
options = { force: false, emit: false, ...options };
|
|
1124
1082
|
if (sortCol.value !== col.dataIndex) {
|
|
1125
1083
|
sortCol.value = col.dataIndex;
|
|
1126
1084
|
sortOrderIndex.value = 0;
|
|
@@ -1138,9 +1096,10 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
|
|
|
1138
1096
|
}
|
|
1139
1097
|
function onRowClick(e, row) {
|
|
1140
1098
|
emits("row-click", e, row);
|
|
1141
|
-
if (currentItem.value === row)
|
|
1099
|
+
if (props.rowKey ? currentItemKey.value === rowKeyGen(row) : currentItem.value === row)
|
|
1142
1100
|
return;
|
|
1143
1101
|
currentItem.value = row;
|
|
1102
|
+
currentItemKey.value = rowKeyGen(row);
|
|
1144
1103
|
emits("current-change", e, row);
|
|
1145
1104
|
}
|
|
1146
1105
|
function onRowDblclick(e, row) {
|
|
@@ -1168,37 +1127,24 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
|
|
|
1168
1127
|
function onTableScroll(e) {
|
|
1169
1128
|
if (!(e == null ? void 0 : e.target))
|
|
1170
1129
|
return;
|
|
1171
|
-
const {
|
|
1172
|
-
|
|
1173
|
-
|
|
1174
|
-
} = e.target;
|
|
1175
|
-
const {
|
|
1176
|
-
scrollTop: vScrollTop,
|
|
1177
|
-
startIndex,
|
|
1178
|
-
endIndex
|
|
1179
|
-
} = virtualScroll.value;
|
|
1180
|
-
const {
|
|
1181
|
-
scrollLeft: vScrollLeft
|
|
1182
|
-
} = virtualScrollX.value;
|
|
1130
|
+
const { scrollTop, scrollLeft } = e.target;
|
|
1131
|
+
const { scrollTop: vScrollTop } = virtualScroll.value;
|
|
1132
|
+
const { scrollLeft: vScrollLeft } = virtualScrollX.value;
|
|
1183
1133
|
const isYScroll = scrollTop !== vScrollTop;
|
|
1184
1134
|
const isXScroll = scrollLeft !== vScrollLeft;
|
|
1185
|
-
if (isYScroll) {
|
|
1186
|
-
virtualScroll.value.scrollTop = scrollTop;
|
|
1187
|
-
}
|
|
1188
|
-
if (virtual_on.value) {
|
|
1135
|
+
if (isYScroll && virtual_on.value) {
|
|
1189
1136
|
updateVirtualScrollY(scrollTop);
|
|
1190
1137
|
}
|
|
1191
1138
|
if (isXScroll) {
|
|
1192
|
-
virtualScrollX.value.scrollLeft = scrollLeft;
|
|
1193
1139
|
updateFixedShadow();
|
|
1140
|
+
if (virtualX_on.value) {
|
|
1141
|
+
updateVirtualScrollX(scrollLeft);
|
|
1142
|
+
} else {
|
|
1143
|
+
virtualScrollX.value.scrollLeft = scrollLeft;
|
|
1144
|
+
}
|
|
1194
1145
|
}
|
|
1195
|
-
|
|
1196
|
-
|
|
1197
|
-
}
|
|
1198
|
-
const data = {
|
|
1199
|
-
startIndex,
|
|
1200
|
-
endIndex
|
|
1201
|
-
};
|
|
1146
|
+
const { startIndex, endIndex } = virtualScroll.value;
|
|
1147
|
+
const data = { startIndex, endIndex };
|
|
1202
1148
|
if (isYScroll) {
|
|
1203
1149
|
emits("scroll", e, data);
|
|
1204
1150
|
}
|
|
@@ -1211,33 +1157,24 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
|
|
|
1211
1157
|
currentHover.value = rowKeyGen(row);
|
|
1212
1158
|
}
|
|
1213
1159
|
}
|
|
1214
|
-
function setCurrentRow(rowKey, option = {
|
|
1215
|
-
silent: false
|
|
1216
|
-
}) {
|
|
1160
|
+
function setCurrentRow(rowKey, option = { silent: false }) {
|
|
1217
1161
|
if (!dataSourceCopy.value.length)
|
|
1218
1162
|
return;
|
|
1219
1163
|
currentItem.value = dataSourceCopy.value.find((it) => rowKeyGen(it) === rowKey);
|
|
1164
|
+
currentItemKey.value = rowKeyGen(currentItem.value);
|
|
1220
1165
|
if (!option.silent) {
|
|
1221
1166
|
emits("current-change", null, currentItem.value);
|
|
1222
1167
|
}
|
|
1223
1168
|
}
|
|
1224
1169
|
function setSorter(dataIndex, order, option = {}) {
|
|
1225
1170
|
var _a;
|
|
1226
|
-
const newOption = {
|
|
1227
|
-
silent: true,
|
|
1228
|
-
sortOption: null,
|
|
1229
|
-
sort: true,
|
|
1230
|
-
...option
|
|
1231
|
-
};
|
|
1171
|
+
const newOption = { silent: true, sortOption: null, sort: true, ...option };
|
|
1232
1172
|
sortCol.value = dataIndex;
|
|
1233
1173
|
sortOrderIndex.value = sortSwitchOrder.findIndex((it) => it === order);
|
|
1234
1174
|
if (newOption.sort && ((_a = dataSourceCopy.value) == null ? void 0 : _a.length)) {
|
|
1235
1175
|
const column = newOption.sortOption || tableHeaderLast.value.find((it) => it.dataIndex === sortCol.value);
|
|
1236
1176
|
if (column)
|
|
1237
|
-
onColumnSort(column, false, {
|
|
1238
|
-
force: true,
|
|
1239
|
-
emit: !newOption.silent
|
|
1240
|
-
});
|
|
1177
|
+
onColumnSort(column, false, { force: true, emit: !newOption.silent });
|
|
1241
1178
|
else
|
|
1242
1179
|
console.warn("Can not find column by dataIndex:", sortCol.value);
|
|
1243
1180
|
}
|
|
@@ -1259,6 +1196,12 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
|
|
|
1259
1196
|
function getTableData() {
|
|
1260
1197
|
return toRaw(dataSourceCopy.value);
|
|
1261
1198
|
}
|
|
1199
|
+
function getSortColumns() {
|
|
1200
|
+
const sortOrder = sortSwitchOrder[sortOrderIndex.value];
|
|
1201
|
+
if (!sortOrder)
|
|
1202
|
+
return [];
|
|
1203
|
+
return [{ dataIndex: sortCol.value, order: sortOrder }];
|
|
1204
|
+
}
|
|
1262
1205
|
__expose({
|
|
1263
1206
|
/** 初始化横向纵向虚拟滚动 */
|
|
1264
1207
|
initVirtualScroll,
|
|
@@ -1274,6 +1217,8 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
|
|
|
1274
1217
|
setHighlightDimRow,
|
|
1275
1218
|
/** 表格排序列dataIndex */
|
|
1276
1219
|
sortCol,
|
|
1220
|
+
/** 获取当前排序状态 */
|
|
1221
|
+
getSortColumns,
|
|
1277
1222
|
/** 设置排序 */
|
|
1278
1223
|
setSorter,
|
|
1279
1224
|
/** 重置排序 */
|
|
@@ -1300,137 +1245,173 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
|
|
|
1300
1245
|
"border-body-v": props.bordered === "body-v",
|
|
1301
1246
|
stripe: props.stripe
|
|
1302
1247
|
}]),
|
|
1303
|
-
style: normalizeStyle(
|
|
1304
|
-
|
|
1305
|
-
|
|
1306
|
-
|
|
1248
|
+
style: normalizeStyle(
|
|
1249
|
+
_ctx.virtual && {
|
|
1250
|
+
"--row-height": unref(virtualScroll).rowHeight + "px",
|
|
1251
|
+
"--header-row-height": (props.headerRowHeight || props.rowHeight) + "px"
|
|
1252
|
+
}
|
|
1253
|
+
),
|
|
1307
1254
|
onScroll: onTableScroll,
|
|
1308
1255
|
onWheel: onTableWheel
|
|
1309
|
-
}, [
|
|
1310
|
-
|
|
1311
|
-
|
|
1312
|
-
|
|
1313
|
-
|
|
1314
|
-
|
|
1315
|
-
|
|
1316
|
-
|
|
1317
|
-
|
|
1318
|
-
|
|
1319
|
-
|
|
1320
|
-
|
|
1321
|
-
|
|
1322
|
-
|
|
1323
|
-
|
|
1324
|
-
|
|
1325
|
-
|
|
1326
|
-
|
|
1256
|
+
}, [
|
|
1257
|
+
withDirectives(createElementVNode("div", {
|
|
1258
|
+
ref_key: "colResizeIndicator",
|
|
1259
|
+
ref: colResizeIndicator,
|
|
1260
|
+
class: "column-resize-indicator"
|
|
1261
|
+
}, null, 512), [
|
|
1262
|
+
[vShow, _ctx.colResizable]
|
|
1263
|
+
]),
|
|
1264
|
+
createElementVNode("table", {
|
|
1265
|
+
class: normalizeClass(["stk-table-main", {
|
|
1266
|
+
"fixed-mode": props.fixedMode
|
|
1267
|
+
}]),
|
|
1268
|
+
style: normalizeStyle({ width: _ctx.width, minWidth: _ctx.minWidth, maxWidth: _ctx.maxWidth })
|
|
1269
|
+
}, [
|
|
1270
|
+
!_ctx.headless ? (openBlock(), createElementBlock("thead", _hoisted_1, [
|
|
1271
|
+
(openBlock(true), createElementBlock(Fragment, null, renderList(tableHeaders.value, (row, rowIndex) => {
|
|
1272
|
+
return openBlock(), createElementBlock("tr", {
|
|
1273
|
+
key: rowIndex,
|
|
1274
|
+
onContextmenu: _cache[3] || (_cache[3] = (e) => onHeaderMenu(e))
|
|
1275
|
+
}, [
|
|
1276
|
+
unref(virtualX_on) ? (openBlock(), createElementBlock("th", {
|
|
1277
|
+
key: 0,
|
|
1278
|
+
class: "virtual-x-left",
|
|
1279
|
+
style: normalizeStyle({
|
|
1280
|
+
minWidth: unref(virtualScrollX).offsetLeft + "px",
|
|
1281
|
+
width: unref(virtualScrollX).offsetLeft + "px"
|
|
1282
|
+
})
|
|
1283
|
+
}, null, 4)) : createCommentVNode("", true),
|
|
1284
|
+
(openBlock(true), createElementBlock(Fragment, null, renderList(unref(virtualX_on) && rowIndex === tableHeaders.value.length - 1 ? unref(virtualX_columnPart) : row, (col, colIndex) => {
|
|
1285
|
+
return openBlock(), createElementBlock("th", {
|
|
1286
|
+
key: col.dataIndex,
|
|
1287
|
+
"data-col-key": colKeyGen(col),
|
|
1288
|
+
draggable: unref(isHeaderDraggable)(col) ? "true" : "false",
|
|
1289
|
+
rowspan: unref(virtualX_on) ? 1 : col.rowSpan,
|
|
1290
|
+
colspan: col.colSpan,
|
|
1291
|
+
style: normalizeStyle(getCellStyle(1, col, rowIndex)),
|
|
1292
|
+
title: col.title,
|
|
1293
|
+
class: normalizeClass([
|
|
1294
|
+
col.sorter ? "sortable" : "",
|
|
1295
|
+
col.dataIndex === unref(sortCol) && unref(sortOrderIndex) !== 0 && "sorter-" + sortSwitchOrder[unref(sortOrderIndex)],
|
|
1296
|
+
_ctx.showHeaderOverflow ? "text-overflow" : "",
|
|
1297
|
+
col.headerClassName,
|
|
1298
|
+
unref(getFixedColClass)(col)
|
|
1299
|
+
]),
|
|
1300
|
+
onClick: (e) => {
|
|
1301
|
+
onColumnSort(col);
|
|
1302
|
+
onHeaderCellClick(e, col);
|
|
1303
|
+
},
|
|
1304
|
+
onDragstart: _cache[0] || (_cache[0] = //@ts-ignore
|
|
1305
|
+
(...args) => unref(onThDragStart) && unref(onThDragStart)(...args)),
|
|
1306
|
+
onDrop: _cache[1] || (_cache[1] = //@ts-ignore
|
|
1307
|
+
(...args) => unref(onThDrop) && unref(onThDrop)(...args)),
|
|
1308
|
+
onDragover: _cache[2] || (_cache[2] = //@ts-ignore
|
|
1309
|
+
(...args) => unref(onThDragOver) && unref(onThDragOver)(...args))
|
|
1310
|
+
}, [
|
|
1311
|
+
createElementVNode("div", _hoisted_3, [
|
|
1312
|
+
col.customHeaderCell ? (openBlock(), createBlock(resolveDynamicComponent(col.customHeaderCell), {
|
|
1313
|
+
key: 0,
|
|
1314
|
+
col
|
|
1315
|
+
}, null, 8, ["col"])) : renderSlot(_ctx.$slots, "tableHeader", {
|
|
1316
|
+
key: 1,
|
|
1317
|
+
col
|
|
1318
|
+
}, () => [
|
|
1319
|
+
createElementVNode("span", _hoisted_4, toDisplayString(col.title), 1)
|
|
1320
|
+
]),
|
|
1321
|
+
col.sorter ? (openBlock(), createElementBlock("span", _hoisted_5, _hoisted_7)) : createCommentVNode("", true),
|
|
1322
|
+
_ctx.colResizable && colIndex > 0 ? (openBlock(), createElementBlock("div", {
|
|
1323
|
+
key: 3,
|
|
1324
|
+
class: "table-header-resizer left",
|
|
1325
|
+
onMousedown: (e) => unref(onThResizeMouseDown)(e, col, true)
|
|
1326
|
+
}, null, 40, _hoisted_8)) : createCommentVNode("", true),
|
|
1327
|
+
_ctx.colResizable ? (openBlock(), createElementBlock("div", {
|
|
1328
|
+
key: 4,
|
|
1329
|
+
class: "table-header-resizer right",
|
|
1330
|
+
onMousedown: (e) => unref(onThResizeMouseDown)(e, col)
|
|
1331
|
+
}, null, 40, _hoisted_9)) : createCommentVNode("", true)
|
|
1332
|
+
])
|
|
1333
|
+
], 46, _hoisted_2);
|
|
1334
|
+
}), 128)),
|
|
1335
|
+
unref(virtualX_on) ? (openBlock(), createElementBlock("th", {
|
|
1336
|
+
key: 1,
|
|
1337
|
+
class: "virtual-x-right",
|
|
1338
|
+
style: normalizeStyle({
|
|
1339
|
+
minWidth: unref(virtualX_offsetRight) + "px",
|
|
1340
|
+
width: unref(virtualX_offsetRight) + "px"
|
|
1341
|
+
})
|
|
1342
|
+
}, null, 4)) : createCommentVNode("", true)
|
|
1343
|
+
], 32);
|
|
1344
|
+
}), 128))
|
|
1345
|
+
])) : createCommentVNode("", true),
|
|
1346
|
+
createElementVNode("tbody", null, [
|
|
1347
|
+
unref(virtual_on) ? (openBlock(), createElementBlock("tr", {
|
|
1348
|
+
key: 0,
|
|
1349
|
+
style: normalizeStyle({ height: `${unref(virtualScroll).offsetTop}px` }),
|
|
1350
|
+
class: "padding-top-tr"
|
|
1351
|
+
}, [
|
|
1352
|
+
unref(virtualX_on) && _ctx.fixedMode && _ctx.headless ? (openBlock(), createElementBlock("td", _hoisted_10)) : createCommentVNode("", true),
|
|
1353
|
+
_ctx.fixedMode && _ctx.headless ? (openBlock(true), createElementBlock(Fragment, { key: 1 }, renderList(unref(virtualX_columnPart), (col) => {
|
|
1354
|
+
return openBlock(), createElementBlock("td", {
|
|
1355
|
+
key: col.dataIndex,
|
|
1356
|
+
style: normalizeStyle(getCellStyle(2, col))
|
|
1357
|
+
}, null, 4);
|
|
1358
|
+
}), 128)) : createCommentVNode("", true)
|
|
1359
|
+
], 4)) : createCommentVNode("", true),
|
|
1360
|
+
(openBlock(true), createElementBlock(Fragment, null, renderList(unref(virtual_dataSourcePart), (row, i) => {
|
|
1361
|
+
return openBlock(), createElementBlock("tr", {
|
|
1362
|
+
key: _ctx.rowKey ? rowKeyGen(row) : i,
|
|
1363
|
+
"data-row-key": _ctx.rowKey ? rowKeyGen(row) : i,
|
|
1364
|
+
class: normalizeClass({
|
|
1365
|
+
active: _ctx.rowKey ? rowKeyGen(row) === rowKeyGen(currentItem.value) : row === currentItem.value,
|
|
1366
|
+
hover: _ctx.rowKey ? rowKeyGen(row) === currentHover.value : row === currentHover.value,
|
|
1367
|
+
[_ctx.rowClassName(row, i)]: true
|
|
1368
|
+
}),
|
|
1369
|
+
style: normalizeStyle({
|
|
1370
|
+
backgroundColor: row._bgc
|
|
1371
|
+
}),
|
|
1372
|
+
onClick: (e) => onRowClick(e, row),
|
|
1373
|
+
onDblclick: (e) => onRowDblclick(e, row),
|
|
1374
|
+
onContextmenu: (e) => onRowMenu(e, row),
|
|
1375
|
+
onMouseover: (e) => onTrMouseOver(e, row)
|
|
1376
|
+
}, [
|
|
1377
|
+
unref(virtualX_on) ? (openBlock(), createElementBlock("td", _hoisted_12)) : createCommentVNode("", true),
|
|
1378
|
+
(openBlock(true), createElementBlock(Fragment, null, renderList(unref(virtualX_columnPart), (col) => {
|
|
1379
|
+
return openBlock(), createElementBlock("td", {
|
|
1380
|
+
key: col.dataIndex,
|
|
1381
|
+
"data-index": col.dataIndex,
|
|
1382
|
+
class: normalizeClass([col.className, _ctx.showOverflow ? "text-overflow" : "", unref(getFixedColClass)(col)]),
|
|
1383
|
+
style: normalizeStyle(getCellStyle(2, col)),
|
|
1384
|
+
onClick: (e) => onCellClick(e, row, col)
|
|
1385
|
+
}, [
|
|
1386
|
+
col.customCell ? (openBlock(), createBlock(resolveDynamicComponent(col.customCell), {
|
|
1387
|
+
key: 0,
|
|
1388
|
+
col,
|
|
1389
|
+
row,
|
|
1390
|
+
"cell-value": row[col.dataIndex]
|
|
1391
|
+
}, null, 8, ["col", "row", "cell-value"])) : (openBlock(), createElementBlock("div", {
|
|
1392
|
+
key: 1,
|
|
1393
|
+
class: "table-cell-wrapper",
|
|
1394
|
+
title: row[col.dataIndex]
|
|
1395
|
+
}, toDisplayString(row[col.dataIndex] ?? _ctx.emptyCellText), 9, _hoisted_14))
|
|
1396
|
+
], 14, _hoisted_13);
|
|
1397
|
+
}), 128))
|
|
1398
|
+
], 46, _hoisted_11);
|
|
1399
|
+
}), 128)),
|
|
1400
|
+
unref(virtual_on) ? (openBlock(), createElementBlock("tr", {
|
|
1401
|
+
key: 1,
|
|
1402
|
+
style: normalizeStyle({ height: `${unref(virtual_offsetBottom)}px` })
|
|
1403
|
+
}, null, 4)) : createCommentVNode("", true)
|
|
1404
|
+
])
|
|
1405
|
+
], 6),
|
|
1406
|
+
(!dataSourceCopy.value || !dataSourceCopy.value.length) && _ctx.showNoData ? (openBlock(), createElementBlock("div", {
|
|
1327
1407
|
key: 0,
|
|
1328
|
-
class: "
|
|
1329
|
-
|
|
1330
|
-
|
|
1331
|
-
|
|
1332
|
-
|
|
1333
|
-
|
|
1334
|
-
|
|
1335
|
-
key: col.dataIndex,
|
|
1336
|
-
"data-col-key": colKeyGen(col),
|
|
1337
|
-
draggable: _ctx.headerDrag ? "true" : "false",
|
|
1338
|
-
rowspan: unref(virtualX_on) ? 1 : col.rowSpan,
|
|
1339
|
-
colspan: col.colSpan,
|
|
1340
|
-
style: normalizeStyle(getCellStyle(1, col, rowIndex)),
|
|
1341
|
-
title: col.title,
|
|
1342
|
-
class: normalizeClass([col.sorter ? "sortable" : "", col.dataIndex === unref(sortCol) && unref(sortOrderIndex) !== 0 && "sorter-" + sortSwitchOrder[unref(sortOrderIndex)], _ctx.showHeaderOverflow ? "text-overflow" : "", col.headerClassName, ...getFixedColClass(col)]),
|
|
1343
|
-
onClick: (e) => {
|
|
1344
|
-
onColumnSort(col);
|
|
1345
|
-
onHeaderCellClick(e, col);
|
|
1346
|
-
},
|
|
1347
|
-
onDragstart: _cache[0] || (_cache[0] = //@ts-ignore
|
|
1348
|
-
(...args) => unref(onThDragStart) && unref(onThDragStart)(...args)),
|
|
1349
|
-
onDrop: _cache[1] || (_cache[1] = //@ts-ignore
|
|
1350
|
-
(...args) => unref(onThDrop) && unref(onThDrop)(...args)),
|
|
1351
|
-
onDragover: _cache[2] || (_cache[2] = //@ts-ignore
|
|
1352
|
-
(...args) => unref(onThDragOver) && unref(onThDragOver)(...args))
|
|
1353
|
-
}, [createElementVNode("div", _hoisted_3, [col.customHeaderCell ? (openBlock(), createBlock(resolveDynamicComponent(col.customHeaderCell), {
|
|
1354
|
-
key: 0,
|
|
1355
|
-
col
|
|
1356
|
-
}, null, 8, ["col"])) : renderSlot(_ctx.$slots, "tableHeader", {
|
|
1357
|
-
key: 1,
|
|
1358
|
-
col
|
|
1359
|
-
}, () => [createElementVNode("span", _hoisted_4, toDisplayString(col.title), 1)]), col.sorter ? (openBlock(), createElementBlock("span", _hoisted_5, _hoisted_7)) : createCommentVNode("", true), _ctx.colResizable && colIndex > 0 ? (openBlock(), createElementBlock("div", {
|
|
1360
|
-
key: 3,
|
|
1361
|
-
class: "table-header-resizer left",
|
|
1362
|
-
onMousedown: (e) => unref(onThResizeMouseDown)(e, col, true)
|
|
1363
|
-
}, null, 40, _hoisted_8)) : createCommentVNode("", true), _ctx.colResizable ? (openBlock(), createElementBlock("div", {
|
|
1364
|
-
key: 4,
|
|
1365
|
-
class: "table-header-resizer right",
|
|
1366
|
-
onMousedown: (e) => unref(onThResizeMouseDown)(e, col)
|
|
1367
|
-
}, null, 40, _hoisted_9)) : createCommentVNode("", true)])], 46, _hoisted_2);
|
|
1368
|
-
}), 128)), unref(virtualX_on) ? (openBlock(), createElementBlock("th", {
|
|
1369
|
-
key: 1,
|
|
1370
|
-
class: "virtual-x-right",
|
|
1371
|
-
style: normalizeStyle({
|
|
1372
|
-
minWidth: unref(virtualX_offsetRight) + "px",
|
|
1373
|
-
width: unref(virtualX_offsetRight) + "px"
|
|
1374
|
-
})
|
|
1375
|
-
}, null, 4)) : createCommentVNode("", true)], 32);
|
|
1376
|
-
}), 128))])) : createCommentVNode("", true), createElementVNode("tbody", null, [unref(virtual_on) ? (openBlock(), createElementBlock("tr", {
|
|
1377
|
-
key: 0,
|
|
1378
|
-
style: normalizeStyle({
|
|
1379
|
-
height: `${unref(virtualScroll).offsetTop}px`
|
|
1380
|
-
}),
|
|
1381
|
-
class: "padding-top-tr"
|
|
1382
|
-
}, [unref(virtualX_on) && _ctx.fixedMode && _ctx.headless ? (openBlock(), createElementBlock("td", _hoisted_10)) : createCommentVNode("", true), _ctx.fixedMode && _ctx.headless ? (openBlock(true), createElementBlock(Fragment, {
|
|
1383
|
-
key: 1
|
|
1384
|
-
}, renderList(unref(virtualX_columnPart), (col) => {
|
|
1385
|
-
return openBlock(), createElementBlock("td", {
|
|
1386
|
-
key: col.dataIndex,
|
|
1387
|
-
style: normalizeStyle(getCellStyle(2, col))
|
|
1388
|
-
}, null, 4);
|
|
1389
|
-
}), 128)) : createCommentVNode("", true)], 4)) : createCommentVNode("", true), (openBlock(true), createElementBlock(Fragment, null, renderList(unref(virtual_dataSourcePart), (row, i) => {
|
|
1390
|
-
return openBlock(), createElementBlock("tr", {
|
|
1391
|
-
key: _ctx.rowKey ? rowKeyGen(row) : i,
|
|
1392
|
-
"data-row-key": _ctx.rowKey ? rowKeyGen(row) : i,
|
|
1393
|
-
class: normalizeClass({
|
|
1394
|
-
active: _ctx.rowKey ? rowKeyGen(row) === (currentItem.value && rowKeyGen(currentItem.value)) : row === currentItem.value,
|
|
1395
|
-
hover: _ctx.rowKey ? rowKeyGen(row) === currentHover.value : row === currentHover.value,
|
|
1396
|
-
[_ctx.rowClassName(row, i)]: true
|
|
1397
|
-
}),
|
|
1398
|
-
style: normalizeStyle({
|
|
1399
|
-
backgroundColor: row._bgc
|
|
1400
|
-
}),
|
|
1401
|
-
onClick: (e) => onRowClick(e, row),
|
|
1402
|
-
onDblclick: (e) => onRowDblclick(e, row),
|
|
1403
|
-
onContextmenu: (e) => onRowMenu(e, row),
|
|
1404
|
-
onMouseover: (e) => onTrMouseOver(e, row)
|
|
1405
|
-
}, [unref(virtualX_on) ? (openBlock(), createElementBlock("td", _hoisted_12)) : createCommentVNode("", true), (openBlock(true), createElementBlock(Fragment, null, renderList(unref(virtualX_columnPart), (col) => {
|
|
1406
|
-
return openBlock(), createElementBlock("td", {
|
|
1407
|
-
key: col.dataIndex,
|
|
1408
|
-
"data-index": col.dataIndex,
|
|
1409
|
-
class: normalizeClass([col.className, _ctx.showOverflow ? "text-overflow" : "", ...getFixedColClass(col)]),
|
|
1410
|
-
style: normalizeStyle(getCellStyle(2, col)),
|
|
1411
|
-
onClick: (e) => onCellClick(e, row, col)
|
|
1412
|
-
}, [col.customCell ? (openBlock(), createBlock(resolveDynamicComponent(col.customCell), {
|
|
1413
|
-
key: 0,
|
|
1414
|
-
col,
|
|
1415
|
-
row,
|
|
1416
|
-
"cell-value": row[col.dataIndex]
|
|
1417
|
-
}, null, 8, ["col", "row", "cell-value"])) : (openBlock(), createElementBlock("div", {
|
|
1418
|
-
key: 1,
|
|
1419
|
-
class: "table-cell-wrapper",
|
|
1420
|
-
title: row[col.dataIndex]
|
|
1421
|
-
}, toDisplayString(row[col.dataIndex] ?? _ctx.emptyCellText), 9, _hoisted_14))], 14, _hoisted_13);
|
|
1422
|
-
}), 128))], 46, _hoisted_11);
|
|
1423
|
-
}), 128)), unref(virtual_on) ? (openBlock(), createElementBlock("tr", {
|
|
1424
|
-
key: 1,
|
|
1425
|
-
style: normalizeStyle({
|
|
1426
|
-
height: `${unref(virtual_offsetBottom)}px`
|
|
1427
|
-
})
|
|
1428
|
-
}, null, 4)) : createCommentVNode("", true)])], 6), (!dataSourceCopy.value || !dataSourceCopy.value.length) && _ctx.showNoData ? (openBlock(), createElementBlock("div", {
|
|
1429
|
-
key: 0,
|
|
1430
|
-
class: normalizeClass(["stk-table-no-data", {
|
|
1431
|
-
"no-data-full": _ctx.noDataFull
|
|
1432
|
-
}])
|
|
1433
|
-
}, [renderSlot(_ctx.$slots, "empty", {}, () => [createTextVNode("暂无数据")])], 2)) : createCommentVNode("", true)], 38);
|
|
1408
|
+
class: normalizeClass(["stk-table-no-data", { "no-data-full": _ctx.noDataFull }])
|
|
1409
|
+
}, [
|
|
1410
|
+
renderSlot(_ctx.$slots, "empty", {}, () => [
|
|
1411
|
+
createTextVNode("暂无数据")
|
|
1412
|
+
])
|
|
1413
|
+
], 2)) : createCommentVNode("", true)
|
|
1414
|
+
], 38);
|
|
1434
1415
|
};
|
|
1435
1416
|
}
|
|
1436
1417
|
});
|