@jetlinks-web/components 3.1.14 → 3.1.15
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/es/EditTable/FormItem.js +0 -1
- package/es/ProTable/Content.js +3 -4
- package/es/ProTable/setting.js +1 -1
- package/es/Search/Advanced/index.js +2 -1
- package/es/Search/Search.js +2 -1
- package/es/VirtualTable/VirtualTable.js +122 -47
- package/es/VirtualTable/data.js +43 -1
- package/es/VirtualTable/style/index.js +6 -0
- package/lib/EditTable/FormItem.js +0 -1
- package/lib/ProTable/Content.js +3 -4
- package/lib/ProTable/setting.js +1 -1
- package/lib/Search/Advanced/index.js +2 -1
- package/lib/Search/Search.js +2 -1
- package/lib/VirtualTable/VirtualTable.js +122 -47
- package/lib/VirtualTable/data.js +44 -2
- package/lib/VirtualTable/style/index.js +6 -0
- package/package.json +1 -1
package/es/EditTable/FormItem.js
CHANGED
package/es/ProTable/Content.js
CHANGED
|
@@ -169,14 +169,13 @@ const __sfc_main__ = _defineComponent({
|
|
|
169
169
|
]))
|
|
170
170
|
: (_openBlock(), _createElementBlock(_Fragment, { key: 1 }, [
|
|
171
171
|
(props.type === 'TREE')
|
|
172
|
-
? (_openBlock(), _createBlock(_unref(JVirtualTable), {
|
|
173
|
-
key: 0,
|
|
172
|
+
? (_openBlock(), _createBlock(_unref(JVirtualTable), _mergeProps({ key: 0 }, props, {
|
|
174
173
|
rowKey: _ctx.rowKey,
|
|
175
174
|
"row-selection": __rowSelection.value,
|
|
176
175
|
dataSource: _ctx.dataSource,
|
|
177
176
|
columns: _columns.value,
|
|
178
177
|
height: _ctx.height
|
|
179
|
-
}, _createSlots({
|
|
178
|
+
}), _createSlots({
|
|
180
179
|
bodyCell: _withCtx(({ column, record, index }) => [
|
|
181
180
|
((_optionalChain([column, 'optionalAccess', _26 => _26.key]) || _optionalChain([column, 'optionalAccess', _27 => _27.dataIndex])) && _optionalChain([column, 'optionalAccess', _28 => _28.scopedSlots]) && (_optionalChain([_slots, 'access', _29 => _29.value, 'optionalAccess', _30 => _30[_optionalChain([column, 'optionalAccess', _31 => _31.dataIndex])]]) || _optionalChain([_slots, 'access', _32 => _32.value, 'optionalAccess', _33 => _33[_optionalChain([column, 'optionalAccess', _34 => _34.key])]])))
|
|
182
181
|
? _renderSlot(_ctx.$slots, _optionalChain([column, 'optionalAccess', _35 => _35.key]) || _optionalChain([column, 'optionalAccess', _36 => _36.dataIndex]), _mergeProps({ key: 0 }, record, {
|
|
@@ -204,7 +203,7 @@ const __sfc_main__ = _defineComponent({
|
|
|
204
203
|
])
|
|
205
204
|
};
|
|
206
205
|
})
|
|
207
|
-
]),
|
|
206
|
+
]), 1040 /* FULL_PROPS, DYNAMIC_SLOTS */, ["rowKey", "row-selection", "dataSource", "columns", "height"]))
|
|
208
207
|
: (_openBlock(), _createBlock(_unref(Table), _mergeProps({ key: 1 }, props, {
|
|
209
208
|
"row-selection": __rowSelection.value,
|
|
210
209
|
dataSource: _ctx.dataSource,
|
package/es/ProTable/setting.js
CHANGED
|
@@ -137,7 +137,7 @@ const __sfc_main__ = _defineComponent({
|
|
|
137
137
|
default: undefined,
|
|
138
138
|
}
|
|
139
139
|
},
|
|
140
|
-
emits: ['search'],
|
|
140
|
+
emits: ['search', 'reset'],
|
|
141
141
|
setup(__props, { expose: __expose, emit: __emit }) {
|
|
142
142
|
const props = __props;
|
|
143
143
|
const emit = __emit;
|
|
@@ -203,6 +203,7 @@ const __sfc_main__ = _defineComponent({
|
|
|
203
203
|
target.value = null;
|
|
204
204
|
}
|
|
205
205
|
emit('search', { terms: [] });
|
|
206
|
+
emit('reset');
|
|
206
207
|
};
|
|
207
208
|
/**
|
|
208
209
|
* 历史下拉单选
|
package/es/Search/Search.js
CHANGED
|
@@ -55,7 +55,7 @@ const __sfc_main__ = _defineComponent({
|
|
|
55
55
|
props: {
|
|
56
56
|
...searchProps()
|
|
57
57
|
},
|
|
58
|
-
emits: ['search'],
|
|
58
|
+
emits: ['search', 'reset'],
|
|
59
59
|
setup(__props, { expose: __expose, emit: __emit }) {
|
|
60
60
|
const props = __props;
|
|
61
61
|
const emit = __emit;
|
|
@@ -80,6 +80,7 @@ const __sfc_main__ = _defineComponent({
|
|
|
80
80
|
};
|
|
81
81
|
const reset = () => {
|
|
82
82
|
initValues();
|
|
83
|
+
emit('reset');
|
|
83
84
|
};
|
|
84
85
|
const handleDefaultValues = (value) => {
|
|
85
86
|
const isObject = Object.prototype.toString.call(value) === '[object Object]';
|
|
@@ -32,11 +32,13 @@ function _optionalChain(ops) { let lastAccessLHS = undefined; let value = ops[0]
|
|
|
32
32
|
"watch": "setup-const",
|
|
33
33
|
"onMounted": "setup-const",
|
|
34
34
|
"nextTick": "setup-const",
|
|
35
|
+
"onUnmounted": "setup-const",
|
|
35
36
|
"Table": "setup-maybe-ref",
|
|
36
37
|
"Checkbox": "setup-maybe-ref",
|
|
37
38
|
"AIcon": "setup-maybe-ref",
|
|
38
39
|
"useVirtualTableStyle": "setup-maybe-ref",
|
|
39
40
|
"useLocaleReceiver": "setup-maybe-ref",
|
|
41
|
+
"_contentProps": "setup-maybe-ref",
|
|
40
42
|
"props": "setup-reactive-const",
|
|
41
43
|
"emits": "setup-const",
|
|
42
44
|
"prefixCls": "setup-ref",
|
|
@@ -44,6 +46,7 @@ function _optionalChain(ops) { let lastAccessLHS = undefined; let value = ops[0]
|
|
|
44
46
|
"hashId": "setup-maybe-ref",
|
|
45
47
|
"contextLocale": "setup-maybe-ref",
|
|
46
48
|
"container": "setup-ref",
|
|
49
|
+
"headerContainer": "setup-ref",
|
|
47
50
|
"rowHeights": "setup-ref",
|
|
48
51
|
"prefixSum": "setup-ref",
|
|
49
52
|
"start": "setup-ref",
|
|
@@ -61,13 +64,19 @@ function _optionalChain(ops) { let lastAccessLHS = undefined; let value = ops[0]
|
|
|
61
64
|
"_columns": "setup-ref",
|
|
62
65
|
"_rowSelection": "setup-ref",
|
|
63
66
|
"onSelectedAllChange": "setup-const",
|
|
67
|
+
"horizontalScrollLeft": "setup-ref",
|
|
68
|
+
"bodyContentEl": "setup-let",
|
|
69
|
+
"headerScrollEl": "setup-let",
|
|
70
|
+
"onBodyHorizontalScroll": "setup-const",
|
|
71
|
+
"bindBodyHorizontalScroll": "setup-const",
|
|
72
|
+
"bindHeaderScrollTarget": "setup-const",
|
|
64
73
|
"onScroll": "setup-const",
|
|
65
74
|
"toggleExpand": "setup-const",
|
|
66
75
|
"updatePrefixSum": "setup-const",
|
|
67
76
|
"updateVisibleNodes": "setup-const"
|
|
68
77
|
} */
|
|
69
|
-
import { unref as _unref, openBlock as _openBlock, createBlock as _createBlock, createCommentVNode as _createCommentVNode, toDisplayString as _toDisplayString, createElementVNode as _createElementVNode, createElementBlock as _createElementBlock, renderSlot as _renderSlot, createTextVNode as _createTextVNode, withCtx as _withCtx, createVNode as _createVNode, normalizeStyle as _normalizeStyle, Fragment as _Fragment, normalizeClass as _normalizeClass } from "vue";
|
|
70
|
-
const _hoisted_1 = { class: "virtual-table-header" };
|
|
78
|
+
import { unref as _unref, openBlock as _openBlock, createBlock as _createBlock, createCommentVNode as _createCommentVNode, toDisplayString as _toDisplayString, createElementVNode as _createElementVNode, createElementBlock as _createElementBlock, renderSlot as _renderSlot, createTextVNode as _createTextVNode, mergeProps as _mergeProps, withCtx as _withCtx, createVNode as _createVNode, normalizeStyle as _normalizeStyle, Fragment as _Fragment, normalizeClass as _normalizeClass } from "vue";
|
|
79
|
+
const _hoisted_1 = { class: "virtual-table-header-fixed" };
|
|
71
80
|
const _hoisted_2 = {
|
|
72
81
|
key: 0,
|
|
73
82
|
class: "virtual-table-all-selected"
|
|
@@ -75,16 +84,18 @@ const _hoisted_2 = {
|
|
|
75
84
|
const _hoisted_3 = ["onClick"];
|
|
76
85
|
import { findAllChildren, flattenTree } from "./data";
|
|
77
86
|
import { isNumber, map, omit } from "lodash-es";
|
|
78
|
-
import { h, computed, ref, watch, onMounted, nextTick } from 'vue';
|
|
87
|
+
import { h, computed, ref, watch, onMounted, nextTick, onUnmounted } from 'vue';
|
|
79
88
|
import { Table, Checkbox } from 'ant-design-vue';
|
|
80
89
|
import AIcon from '../Icon';
|
|
81
90
|
import useVirtualTableStyle from './style';
|
|
82
91
|
import { useLocaleReceiver } from "../LocaleReciver";
|
|
92
|
+
import { _contentProps } from "./data";
|
|
83
93
|
const buffer = 5;
|
|
84
94
|
const __sfc_main__ = Object.assign({
|
|
85
95
|
name: 'JVirtualTable'
|
|
86
96
|
}, {
|
|
87
97
|
props: {
|
|
98
|
+
..._contentProps,
|
|
88
99
|
dataSource: {
|
|
89
100
|
type: Array,
|
|
90
101
|
default: () => []
|
|
@@ -117,6 +128,7 @@ const __sfc_main__ = Object.assign({
|
|
|
117
128
|
const [wrapSSR, hashId] = useVirtualTableStyle(prefixCls);
|
|
118
129
|
const [contextLocale] = useLocaleReceiver('ProTable');
|
|
119
130
|
const container = ref(null);
|
|
131
|
+
const headerContainer = ref(null);
|
|
120
132
|
const rowHeights = ref([]);
|
|
121
133
|
const prefixSum = ref([]);
|
|
122
134
|
const start = ref(0);
|
|
@@ -208,10 +220,63 @@ const __sfc_main__ = Object.assign({
|
|
|
208
220
|
props.rowSelection.onChange(_selectedRowKeys, _checked ? arr : []);
|
|
209
221
|
}
|
|
210
222
|
};
|
|
223
|
+
const horizontalScrollLeft = ref(0);
|
|
224
|
+
let bodyContentEl = null;
|
|
225
|
+
let headerScrollEl = null;
|
|
226
|
+
const onBodyHorizontalScroll = (e) => {
|
|
227
|
+
const left = e.target.scrollLeft || 0;
|
|
228
|
+
horizontalScrollLeft.value = left;
|
|
229
|
+
if (headerScrollEl) {
|
|
230
|
+
if (typeof headerScrollEl.scrollTo === 'function') {
|
|
231
|
+
headerScrollEl.scrollTo({ left });
|
|
232
|
+
}
|
|
233
|
+
else {
|
|
234
|
+
headerScrollEl.scrollLeft = left;
|
|
235
|
+
}
|
|
236
|
+
}
|
|
237
|
+
};
|
|
238
|
+
const bindBodyHorizontalScroll = () => {
|
|
239
|
+
nextTick(() => {
|
|
240
|
+
const box = _optionalChain([container, 'access', _5 => _5.value, 'optionalAccess', _6 => _6.querySelector, 'call', _7 => _7('.virtual-table-visible-box')]);
|
|
241
|
+
const el = _optionalChain([box, 'optionalAccess', _8 => _8.querySelector, 'call', _9 => _9('.ant-table-content')]) || _optionalChain([box, 'optionalAccess', _10 => _10.querySelector, 'call', _11 => _11('.ant-table-body')]);
|
|
242
|
+
if (el && el !== bodyContentEl) {
|
|
243
|
+
if (bodyContentEl) {
|
|
244
|
+
bodyContentEl.removeEventListener('scroll', onBodyHorizontalScroll);
|
|
245
|
+
}
|
|
246
|
+
bodyContentEl = el;
|
|
247
|
+
bodyContentEl.addEventListener('scroll', onBodyHorizontalScroll, { passive: true });
|
|
248
|
+
horizontalScrollLeft.value = bodyContentEl.scrollLeft || 0;
|
|
249
|
+
}
|
|
250
|
+
});
|
|
251
|
+
};
|
|
252
|
+
const bindHeaderScrollTarget = () => {
|
|
253
|
+
nextTick(() => {
|
|
254
|
+
const el = _optionalChain([headerContainer, 'access', _12 => _12.value, 'optionalAccess', _13 => _13.querySelector, 'call', _14 => _14('.ant-table-header')])
|
|
255
|
+
|| _optionalChain([headerContainer, 'access', _15 => _15.value, 'optionalAccess', _16 => _16.querySelector, 'call', _17 => _17('.ant-table-content')]);
|
|
256
|
+
if (el && el !== headerScrollEl) {
|
|
257
|
+
headerScrollEl = el;
|
|
258
|
+
// 初始化时同步一次
|
|
259
|
+
if (typeof headerScrollEl.scrollTo === 'function') {
|
|
260
|
+
headerScrollEl.scrollTo({ left: horizontalScrollLeft.value || 0 });
|
|
261
|
+
}
|
|
262
|
+
else {
|
|
263
|
+
headerScrollEl.scrollLeft = horizontalScrollLeft.value || 0;
|
|
264
|
+
}
|
|
265
|
+
}
|
|
266
|
+
});
|
|
267
|
+
};
|
|
268
|
+
onUnmounted(() => {
|
|
269
|
+
if (bodyContentEl) {
|
|
270
|
+
bodyContentEl.removeEventListener('scroll', onBodyHorizontalScroll);
|
|
271
|
+
bodyContentEl = null;
|
|
272
|
+
}
|
|
273
|
+
});
|
|
211
274
|
const onScroll = (e) => {
|
|
212
275
|
const scrollTop = e.target.scrollTop;
|
|
213
276
|
const vh = viewportHeight.value || 500;
|
|
214
277
|
const total = totalHeight.value;
|
|
278
|
+
// 同步横向滚动位置给表头
|
|
279
|
+
horizontalScrollLeft.value = e.target.scrollLeft || 0;
|
|
215
280
|
// 防止 scrollTop 超出范围
|
|
216
281
|
const clampedScrollTop = Math.min(scrollTop, total - vh);
|
|
217
282
|
// 二分查找
|
|
@@ -266,8 +331,11 @@ const __sfc_main__ = Object.assign({
|
|
|
266
331
|
const updateVisibleNodes = () => {
|
|
267
332
|
visibleNodes.value = flattenData.value.filter(i => i.visible);
|
|
268
333
|
updatePrefixSum();
|
|
269
|
-
|
|
270
|
-
|
|
334
|
+
nextTick(() => {
|
|
335
|
+
onScroll({ target: container.value });
|
|
336
|
+
bindBodyHorizontalScroll();
|
|
337
|
+
bindHeaderScrollTarget();
|
|
338
|
+
});
|
|
271
339
|
};
|
|
272
340
|
watch(() => [JSON.stringify(props.dataSource), JSON.stringify(props.expandedRowKeys)], () => {
|
|
273
341
|
flattenData.value = flattenTree(props.dataSource, 0, null);
|
|
@@ -292,7 +360,7 @@ const __sfc_main__ = Object.assign({
|
|
|
292
360
|
// }, {
|
|
293
361
|
// immediate: true
|
|
294
362
|
// })
|
|
295
|
-
watch(() => _optionalChain([props, 'access',
|
|
363
|
+
watch(() => _optionalChain([props, 'access', _18 => _18.rowSelection, 'optionalAccess', _19 => _19.selectedRowKeys]), (val) => {
|
|
296
364
|
if (val) {
|
|
297
365
|
selectedAll.value = val.length > 0 && flattenData.value.length === val.length;
|
|
298
366
|
}
|
|
@@ -301,49 +369,56 @@ const __sfc_main__ = Object.assign({
|
|
|
301
369
|
});
|
|
302
370
|
onMounted(() => {
|
|
303
371
|
updateVisibleNodes();
|
|
372
|
+
bindBodyHorizontalScroll();
|
|
373
|
+
bindHeaderScrollTarget();
|
|
304
374
|
});
|
|
305
375
|
return (_ctx, _cache) => {
|
|
306
376
|
return (_openBlock(), _createElementBlock("div", {
|
|
307
377
|
class: _normalizeClass(['virtual-table-wrapper', _unref(hashId)])
|
|
308
378
|
}, [
|
|
309
|
-
_createElementVNode("div",
|
|
310
|
-
|
|
311
|
-
|
|
312
|
-
|
|
313
|
-
|
|
314
|
-
|
|
315
|
-
|
|
316
|
-
|
|
317
|
-
|
|
379
|
+
_createElementVNode("div", {
|
|
380
|
+
class: "virtual-table-header",
|
|
381
|
+
ref_key: "headerContainer",
|
|
382
|
+
ref: headerContainer
|
|
383
|
+
}, [
|
|
384
|
+
_createElementVNode("div", _hoisted_1, [
|
|
385
|
+
_createVNode(_unref(Table), _mergeProps(props, {
|
|
386
|
+
columns: _columns.value,
|
|
387
|
+
pagination: false,
|
|
388
|
+
rowKey: __props.rowKey,
|
|
389
|
+
"data-source": [],
|
|
390
|
+
components: {
|
|
391
|
+
body: { wrapper: () => h('div') },
|
|
318
392
|
},
|
|
319
|
-
|
|
320
|
-
|
|
321
|
-
|
|
322
|
-
|
|
323
|
-
|
|
324
|
-
|
|
325
|
-
|
|
326
|
-
|
|
327
|
-
|
|
328
|
-
|
|
329
|
-
|
|
330
|
-
|
|
331
|
-
|
|
332
|
-
|
|
333
|
-
|
|
334
|
-
|
|
335
|
-
|
|
336
|
-
|
|
337
|
-
|
|
338
|
-
|
|
339
|
-
|
|
340
|
-
|
|
341
|
-
|
|
342
|
-
|
|
343
|
-
|
|
344
|
-
|
|
345
|
-
|
|
346
|
-
|
|
393
|
+
"row-selection": false
|
|
394
|
+
}), {
|
|
395
|
+
headerCell: _withCtx(({ column, title }) => [
|
|
396
|
+
(column.key === '__selection__')
|
|
397
|
+
? (_openBlock(), _createElementBlock("span", _hoisted_2, [
|
|
398
|
+
(__props.rowSelection.type !== 'radio' && !__props.rowSelection.hideSelectAll)
|
|
399
|
+
? (_openBlock(), _createBlock(_unref(Checkbox), {
|
|
400
|
+
key: 0,
|
|
401
|
+
checked: selectedAll.value,
|
|
402
|
+
"onUpdate:checked": _cache[0] || (_cache[0] = $event => ((selectedAll).value = $event)),
|
|
403
|
+
onChange: onSelectedAllChange,
|
|
404
|
+
indeterminate: _indeterminate.value,
|
|
405
|
+
disabled: visibleRows.value.length === 0
|
|
406
|
+
}, null, 8 /* PROPS */, ["checked", "indeterminate", "disabled"]))
|
|
407
|
+
: _createCommentVNode("v-if", true),
|
|
408
|
+
_createElementVNode("span", null, _toDisplayString(_optionalChain([__props, 'access', _20 => _20.rowSelection, 'optionalAccess', _21 => _21.columnTitle])), 1 /* TEXT */)
|
|
409
|
+
]))
|
|
410
|
+
: _renderSlot(_ctx.$slots, "headerCell", {
|
|
411
|
+
key: 1,
|
|
412
|
+
title: title,
|
|
413
|
+
column: column
|
|
414
|
+
}, () => [
|
|
415
|
+
_createTextVNode(_toDisplayString(title), 1 /* TEXT */)
|
|
416
|
+
])
|
|
417
|
+
]),
|
|
418
|
+
_: 3 /* FORWARDED */
|
|
419
|
+
}, 16 /* FULL_PROPS */, ["columns", "rowKey", "components"])
|
|
420
|
+
])
|
|
421
|
+
], 512 /* NEED_PATCH */),
|
|
347
422
|
_createElementVNode("div", {
|
|
348
423
|
class: "virtual-table-body",
|
|
349
424
|
ref_key: "container",
|
|
@@ -357,16 +432,16 @@ const __sfc_main__ = Object.assign({
|
|
|
357
432
|
}, null, 4 /* STYLE */),
|
|
358
433
|
_createElementVNode("div", {
|
|
359
434
|
class: "virtual-table-visible-box",
|
|
360
|
-
style: _normalizeStyle({ transform: `translateY(${offsetY.value}px)`, position: 'absolute', top: 0, left: 0, right: 0 })
|
|
435
|
+
style: _normalizeStyle({ transform: `translateY(${offsetY.value}px)`, position: 'absolute', top: 0, left: 0, right: 0, height: '100%' })
|
|
361
436
|
}, [
|
|
362
|
-
_createVNode(_unref(Table), {
|
|
437
|
+
_createVNode(_unref(Table), _mergeProps(props, {
|
|
363
438
|
columns: __props.columns,
|
|
364
439
|
rowKey: __props.rowKey,
|
|
365
440
|
"data-source": visibleRows.value,
|
|
366
441
|
showHeader: false,
|
|
367
442
|
pagination: false,
|
|
368
443
|
rowSelection: _rowSelection.value
|
|
369
|
-
}, {
|
|
444
|
+
}), {
|
|
370
445
|
bodyCell: _withCtx(({ text, record, index, column }) => [
|
|
371
446
|
((firstColumn.value.dataIndex && column.dataIndex === firstColumn.value.dataIndex) || (firstColumn.value.key && column.key === firstColumn.value.key))
|
|
372
447
|
? (_openBlock(), _createElementBlock(_Fragment, { key: 0 }, [
|
|
@@ -397,7 +472,7 @@ const __sfc_main__ = Object.assign({
|
|
|
397
472
|
])
|
|
398
473
|
]),
|
|
399
474
|
_: 3 /* FORWARDED */
|
|
400
|
-
},
|
|
475
|
+
}, 16 /* FULL_PROPS */, ["columns", "rowKey", "data-source", "rowSelection"])
|
|
401
476
|
], 4 /* STYLE */)
|
|
402
477
|
], 36 /* STYLE, NEED_HYDRATION */)
|
|
403
478
|
], 2 /* CLASS */));
|
package/es/VirtualTable/data.js
CHANGED
|
@@ -2,6 +2,7 @@ import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
|
|
|
2
2
|
import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
|
|
3
3
|
// 扁平化数据
|
|
4
4
|
import { omit } from "lodash-es";
|
|
5
|
+
import { tableProps } from "ant-design-vue/es/table";
|
|
5
6
|
var _flattenTree = function flattenTree(tree) {
|
|
6
7
|
var level = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
|
|
7
8
|
var parentId = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : null;
|
|
@@ -37,4 +38,45 @@ export var findAllChildren = function findAllChildren() {
|
|
|
37
38
|
}
|
|
38
39
|
recursive(parentId);
|
|
39
40
|
return result;
|
|
40
|
-
};
|
|
41
|
+
};
|
|
42
|
+
export var _headerProps = {
|
|
43
|
+
mode: {
|
|
44
|
+
type: [String, undefined],
|
|
45
|
+
default: undefined
|
|
46
|
+
},
|
|
47
|
+
modeValue: {
|
|
48
|
+
type: String,
|
|
49
|
+
default: 'TABLE'
|
|
50
|
+
}
|
|
51
|
+
};
|
|
52
|
+
export var _contentProps = _objectSpread(_objectSpread(_objectSpread({}, tableProps()), _headerProps), {}, {
|
|
53
|
+
dataSource: {
|
|
54
|
+
type: Array,
|
|
55
|
+
default: function _default() {
|
|
56
|
+
return [];
|
|
57
|
+
}
|
|
58
|
+
},
|
|
59
|
+
columns: {
|
|
60
|
+
type: Array,
|
|
61
|
+
default: function _default() {
|
|
62
|
+
return [];
|
|
63
|
+
}
|
|
64
|
+
},
|
|
65
|
+
expandedRowKeys: {
|
|
66
|
+
type: Array,
|
|
67
|
+
default: function _default() {
|
|
68
|
+
return [];
|
|
69
|
+
}
|
|
70
|
+
},
|
|
71
|
+
rowSelection: {
|
|
72
|
+
type: Object
|
|
73
|
+
},
|
|
74
|
+
rowKey: {
|
|
75
|
+
type: [String, Function],
|
|
76
|
+
default: 'id'
|
|
77
|
+
},
|
|
78
|
+
height: {
|
|
79
|
+
type: Number,
|
|
80
|
+
default: 500
|
|
81
|
+
}
|
|
82
|
+
});
|
|
@@ -5,9 +5,11 @@ var genVirtualTableStyle = function genVirtualTableStyle() {
|
|
|
5
5
|
display: 'flex',
|
|
6
6
|
'flex-direction': 'column',
|
|
7
7
|
'.virtual-table-header': {
|
|
8
|
+
overflow: 'hidden',
|
|
8
9
|
'.ant-table': {
|
|
9
10
|
'.ant-table-container': {
|
|
10
11
|
'.ant-table-content': {
|
|
12
|
+
overflow: 'hidden !important',
|
|
11
13
|
'.ant-table-tbody': {
|
|
12
14
|
display: 'none'
|
|
13
15
|
}
|
|
@@ -20,6 +22,10 @@ var genVirtualTableStyle = function genVirtualTableStyle() {
|
|
|
20
22
|
position: 'relative',
|
|
21
23
|
'min-height': '100px'
|
|
22
24
|
},
|
|
25
|
+
'.virtual-table-header-fixed': {
|
|
26
|
+
// 位移的容器，提升位移动画性能
|
|
27
|
+
'will-change': 'transform'
|
|
28
|
+
},
|
|
23
29
|
'.virtual-table-row-expand-icon': {
|
|
24
30
|
'margin-right': '8px',
|
|
25
31
|
'font-size': 'relative',
|
package/lib/ProTable/Content.js
CHANGED
|
@@ -169,14 +169,13 @@ const __sfc_main__ = _defineComponent({
|
|
|
169
169
|
]))
|
|
170
170
|
: (_openBlock(), _createElementBlock(_Fragment, { key: 1 }, [
|
|
171
171
|
(props.type === 'TREE')
|
|
172
|
-
? (_openBlock(), _createBlock(_unref(JVirtualTable), {
|
|
173
|
-
key: 0,
|
|
172
|
+
? (_openBlock(), _createBlock(_unref(JVirtualTable), _mergeProps({ key: 0 }, props, {
|
|
174
173
|
rowKey: _ctx.rowKey,
|
|
175
174
|
"row-selection": __rowSelection.value,
|
|
176
175
|
dataSource: _ctx.dataSource,
|
|
177
176
|
columns: _columns.value,
|
|
178
177
|
height: _ctx.height
|
|
179
|
-
}, _createSlots({
|
|
178
|
+
}), _createSlots({
|
|
180
179
|
bodyCell: _withCtx(({ column, record, index }) => [
|
|
181
180
|
((_optionalChain([column, 'optionalAccess', _26 => _26.key]) || _optionalChain([column, 'optionalAccess', _27 => _27.dataIndex])) && _optionalChain([column, 'optionalAccess', _28 => _28.scopedSlots]) && (_optionalChain([_slots, 'access', _29 => _29.value, 'optionalAccess', _30 => _30[_optionalChain([column, 'optionalAccess', _31 => _31.dataIndex])]]) || _optionalChain([_slots, 'access', _32 => _32.value, 'optionalAccess', _33 => _33[_optionalChain([column, 'optionalAccess', _34 => _34.key])]])))
|
|
182
181
|
? _renderSlot(_ctx.$slots, _optionalChain([column, 'optionalAccess', _35 => _35.key]) || _optionalChain([column, 'optionalAccess', _36 => _36.dataIndex]), _mergeProps({ key: 0 }, record, {
|
|
@@ -204,7 +203,7 @@ const __sfc_main__ = _defineComponent({
|
|
|
204
203
|
])
|
|
205
204
|
};
|
|
206
205
|
})
|
|
207
|
-
]),
|
|
206
|
+
]), 1040 /* FULL_PROPS, DYNAMIC_SLOTS */, ["rowKey", "row-selection", "dataSource", "columns", "height"]))
|
|
208
207
|
: (_openBlock(), _createBlock(_unref(Table), _mergeProps({ key: 1 }, props, {
|
|
209
208
|
"row-selection": __rowSelection.value,
|
|
210
209
|
dataSource: _ctx.dataSource,
|
package/lib/ProTable/setting.js
CHANGED
|
@@ -137,7 +137,7 @@ const __sfc_main__ = _defineComponent({
|
|
|
137
137
|
default: undefined,
|
|
138
138
|
}
|
|
139
139
|
},
|
|
140
|
-
emits: ['search'],
|
|
140
|
+
emits: ['search', 'reset'],
|
|
141
141
|
setup(__props, { expose: __expose, emit: __emit }) {
|
|
142
142
|
const props = __props;
|
|
143
143
|
const emit = __emit;
|
|
@@ -203,6 +203,7 @@ const __sfc_main__ = _defineComponent({
|
|
|
203
203
|
target.value = null;
|
|
204
204
|
}
|
|
205
205
|
emit('search', { terms: [] });
|
|
206
|
+
emit('reset');
|
|
206
207
|
};
|
|
207
208
|
/**
|
|
208
209
|
* 历史下拉单选
|
package/lib/Search/Search.js
CHANGED
|
@@ -55,7 +55,7 @@ const __sfc_main__ = _defineComponent({
|
|
|
55
55
|
props: {
|
|
56
56
|
...searchProps()
|
|
57
57
|
},
|
|
58
|
-
emits: ['search'],
|
|
58
|
+
emits: ['search', 'reset'],
|
|
59
59
|
setup(__props, { expose: __expose, emit: __emit }) {
|
|
60
60
|
const props = __props;
|
|
61
61
|
const emit = __emit;
|
|
@@ -80,6 +80,7 @@ const __sfc_main__ = _defineComponent({
|
|
|
80
80
|
};
|
|
81
81
|
const reset = () => {
|
|
82
82
|
initValues();
|
|
83
|
+
emit('reset');
|
|
83
84
|
};
|
|
84
85
|
const handleDefaultValues = (value) => {
|
|
85
86
|
const isObject = Object.prototype.toString.call(value) === '[object Object]';
|
|
@@ -32,11 +32,13 @@ function _optionalChain(ops) { let lastAccessLHS = undefined; let value = ops[0]
|
|
|
32
32
|
"watch": "setup-const",
|
|
33
33
|
"onMounted": "setup-const",
|
|
34
34
|
"nextTick": "setup-const",
|
|
35
|
+
"onUnmounted": "setup-const",
|
|
35
36
|
"Table": "setup-maybe-ref",
|
|
36
37
|
"Checkbox": "setup-maybe-ref",
|
|
37
38
|
"AIcon": "setup-maybe-ref",
|
|
38
39
|
"useVirtualTableStyle": "setup-maybe-ref",
|
|
39
40
|
"useLocaleReceiver": "setup-maybe-ref",
|
|
41
|
+
"_contentProps": "setup-maybe-ref",
|
|
40
42
|
"props": "setup-reactive-const",
|
|
41
43
|
"emits": "setup-const",
|
|
42
44
|
"prefixCls": "setup-ref",
|
|
@@ -44,6 +46,7 @@ function _optionalChain(ops) { let lastAccessLHS = undefined; let value = ops[0]
|
|
|
44
46
|
"hashId": "setup-maybe-ref",
|
|
45
47
|
"contextLocale": "setup-maybe-ref",
|
|
46
48
|
"container": "setup-ref",
|
|
49
|
+
"headerContainer": "setup-ref",
|
|
47
50
|
"rowHeights": "setup-ref",
|
|
48
51
|
"prefixSum": "setup-ref",
|
|
49
52
|
"start": "setup-ref",
|
|
@@ -61,13 +64,19 @@ function _optionalChain(ops) { let lastAccessLHS = undefined; let value = ops[0]
|
|
|
61
64
|
"_columns": "setup-ref",
|
|
62
65
|
"_rowSelection": "setup-ref",
|
|
63
66
|
"onSelectedAllChange": "setup-const",
|
|
67
|
+
"horizontalScrollLeft": "setup-ref",
|
|
68
|
+
"bodyContentEl": "setup-let",
|
|
69
|
+
"headerScrollEl": "setup-let",
|
|
70
|
+
"onBodyHorizontalScroll": "setup-const",
|
|
71
|
+
"bindBodyHorizontalScroll": "setup-const",
|
|
72
|
+
"bindHeaderScrollTarget": "setup-const",
|
|
64
73
|
"onScroll": "setup-const",
|
|
65
74
|
"toggleExpand": "setup-const",
|
|
66
75
|
"updatePrefixSum": "setup-const",
|
|
67
76
|
"updateVisibleNodes": "setup-const"
|
|
68
77
|
} */
|
|
69
|
-
import { unref as _unref, openBlock as _openBlock, createBlock as _createBlock, createCommentVNode as _createCommentVNode, toDisplayString as _toDisplayString, createElementVNode as _createElementVNode, createElementBlock as _createElementBlock, renderSlot as _renderSlot, createTextVNode as _createTextVNode, withCtx as _withCtx, createVNode as _createVNode, normalizeStyle as _normalizeStyle, Fragment as _Fragment, normalizeClass as _normalizeClass } from "vue";
|
|
70
|
-
const _hoisted_1 = { class: "virtual-table-header" };
|
|
78
|
+
import { unref as _unref, openBlock as _openBlock, createBlock as _createBlock, createCommentVNode as _createCommentVNode, toDisplayString as _toDisplayString, createElementVNode as _createElementVNode, createElementBlock as _createElementBlock, renderSlot as _renderSlot, createTextVNode as _createTextVNode, mergeProps as _mergeProps, withCtx as _withCtx, createVNode as _createVNode, normalizeStyle as _normalizeStyle, Fragment as _Fragment, normalizeClass as _normalizeClass } from "vue";
|
|
79
|
+
const _hoisted_1 = { class: "virtual-table-header-fixed" };
|
|
71
80
|
const _hoisted_2 = {
|
|
72
81
|
key: 0,
|
|
73
82
|
class: "virtual-table-all-selected"
|
|
@@ -75,16 +84,18 @@ const _hoisted_2 = {
|
|
|
75
84
|
const _hoisted_3 = ["onClick"];
|
|
76
85
|
import { findAllChildren, flattenTree } from "./data";
|
|
77
86
|
import { isNumber, map, omit } from "lodash-es";
|
|
78
|
-
import { h, computed, ref, watch, onMounted, nextTick } from 'vue';
|
|
87
|
+
import { h, computed, ref, watch, onMounted, nextTick, onUnmounted } from 'vue';
|
|
79
88
|
import { Table, Checkbox } from 'ant-design-vue';
|
|
80
89
|
import AIcon from '../Icon';
|
|
81
90
|
import useVirtualTableStyle from './style';
|
|
82
91
|
import { useLocaleReceiver } from "../LocaleReciver";
|
|
92
|
+
import { _contentProps } from "./data";
|
|
83
93
|
const buffer = 5;
|
|
84
94
|
const __sfc_main__ = Object.assign({
|
|
85
95
|
name: 'JVirtualTable'
|
|
86
96
|
}, {
|
|
87
97
|
props: {
|
|
98
|
+
..._contentProps,
|
|
88
99
|
dataSource: {
|
|
89
100
|
type: Array,
|
|
90
101
|
default: () => []
|
|
@@ -117,6 +128,7 @@ const __sfc_main__ = Object.assign({
|
|
|
117
128
|
const [wrapSSR, hashId] = useVirtualTableStyle(prefixCls);
|
|
118
129
|
const [contextLocale] = useLocaleReceiver('ProTable');
|
|
119
130
|
const container = ref(null);
|
|
131
|
+
const headerContainer = ref(null);
|
|
120
132
|
const rowHeights = ref([]);
|
|
121
133
|
const prefixSum = ref([]);
|
|
122
134
|
const start = ref(0);
|
|
@@ -208,10 +220,63 @@ const __sfc_main__ = Object.assign({
|
|
|
208
220
|
props.rowSelection.onChange(_selectedRowKeys, _checked ? arr : []);
|
|
209
221
|
}
|
|
210
222
|
};
|
|
223
|
+
const horizontalScrollLeft = ref(0);
|
|
224
|
+
let bodyContentEl = null;
|
|
225
|
+
let headerScrollEl = null;
|
|
226
|
+
const onBodyHorizontalScroll = (e) => {
|
|
227
|
+
const left = e.target.scrollLeft || 0;
|
|
228
|
+
horizontalScrollLeft.value = left;
|
|
229
|
+
if (headerScrollEl) {
|
|
230
|
+
if (typeof headerScrollEl.scrollTo === 'function') {
|
|
231
|
+
headerScrollEl.scrollTo({ left });
|
|
232
|
+
}
|
|
233
|
+
else {
|
|
234
|
+
headerScrollEl.scrollLeft = left;
|
|
235
|
+
}
|
|
236
|
+
}
|
|
237
|
+
};
|
|
238
|
+
const bindBodyHorizontalScroll = () => {
|
|
239
|
+
nextTick(() => {
|
|
240
|
+
const box = _optionalChain([container, 'access', _5 => _5.value, 'optionalAccess', _6 => _6.querySelector, 'call', _7 => _7('.virtual-table-visible-box')]);
|
|
241
|
+
const el = _optionalChain([box, 'optionalAccess', _8 => _8.querySelector, 'call', _9 => _9('.ant-table-content')]) || _optionalChain([box, 'optionalAccess', _10 => _10.querySelector, 'call', _11 => _11('.ant-table-body')]);
|
|
242
|
+
if (el && el !== bodyContentEl) {
|
|
243
|
+
if (bodyContentEl) {
|
|
244
|
+
bodyContentEl.removeEventListener('scroll', onBodyHorizontalScroll);
|
|
245
|
+
}
|
|
246
|
+
bodyContentEl = el;
|
|
247
|
+
bodyContentEl.addEventListener('scroll', onBodyHorizontalScroll, { passive: true });
|
|
248
|
+
horizontalScrollLeft.value = bodyContentEl.scrollLeft || 0;
|
|
249
|
+
}
|
|
250
|
+
});
|
|
251
|
+
};
|
|
252
|
+
const bindHeaderScrollTarget = () => {
|
|
253
|
+
nextTick(() => {
|
|
254
|
+
const el = _optionalChain([headerContainer, 'access', _12 => _12.value, 'optionalAccess', _13 => _13.querySelector, 'call', _14 => _14('.ant-table-header')])
|
|
255
|
+
|| _optionalChain([headerContainer, 'access', _15 => _15.value, 'optionalAccess', _16 => _16.querySelector, 'call', _17 => _17('.ant-table-content')]);
|
|
256
|
+
if (el && el !== headerScrollEl) {
|
|
257
|
+
headerScrollEl = el;
|
|
258
|
+
// 初始化时同步一次
|
|
259
|
+
if (typeof headerScrollEl.scrollTo === 'function') {
|
|
260
|
+
headerScrollEl.scrollTo({ left: horizontalScrollLeft.value || 0 });
|
|
261
|
+
}
|
|
262
|
+
else {
|
|
263
|
+
headerScrollEl.scrollLeft = horizontalScrollLeft.value || 0;
|
|
264
|
+
}
|
|
265
|
+
}
|
|
266
|
+
});
|
|
267
|
+
};
|
|
268
|
+
onUnmounted(() => {
|
|
269
|
+
if (bodyContentEl) {
|
|
270
|
+
bodyContentEl.removeEventListener('scroll', onBodyHorizontalScroll);
|
|
271
|
+
bodyContentEl = null;
|
|
272
|
+
}
|
|
273
|
+
});
|
|
211
274
|
const onScroll = (e) => {
|
|
212
275
|
const scrollTop = e.target.scrollTop;
|
|
213
276
|
const vh = viewportHeight.value || 500;
|
|
214
277
|
const total = totalHeight.value;
|
|
278
|
+
// 同步横向滚动位置给表头
|
|
279
|
+
horizontalScrollLeft.value = e.target.scrollLeft || 0;
|
|
215
280
|
// 防止 scrollTop 超出范围
|
|
216
281
|
const clampedScrollTop = Math.min(scrollTop, total - vh);
|
|
217
282
|
// 二分查找
|
|
@@ -266,8 +331,11 @@ const __sfc_main__ = Object.assign({
|
|
|
266
331
|
const updateVisibleNodes = () => {
|
|
267
332
|
visibleNodes.value = flattenData.value.filter(i => i.visible);
|
|
268
333
|
updatePrefixSum();
|
|
269
|
-
|
|
270
|
-
|
|
334
|
+
nextTick(() => {
|
|
335
|
+
onScroll({ target: container.value });
|
|
336
|
+
bindBodyHorizontalScroll();
|
|
337
|
+
bindHeaderScrollTarget();
|
|
338
|
+
});
|
|
271
339
|
};
|
|
272
340
|
watch(() => [JSON.stringify(props.dataSource), JSON.stringify(props.expandedRowKeys)], () => {
|
|
273
341
|
flattenData.value = flattenTree(props.dataSource, 0, null);
|
|
@@ -292,7 +360,7 @@ const __sfc_main__ = Object.assign({
|
|
|
292
360
|
// }, {
|
|
293
361
|
// immediate: true
|
|
294
362
|
// })
|
|
295
|
-
watch(() => _optionalChain([props, 'access',
|
|
363
|
+
watch(() => _optionalChain([props, 'access', _18 => _18.rowSelection, 'optionalAccess', _19 => _19.selectedRowKeys]), (val) => {
|
|
296
364
|
if (val) {
|
|
297
365
|
selectedAll.value = val.length > 0 && flattenData.value.length === val.length;
|
|
298
366
|
}
|
|
@@ -301,49 +369,56 @@ const __sfc_main__ = Object.assign({
|
|
|
301
369
|
});
|
|
302
370
|
onMounted(() => {
|
|
303
371
|
updateVisibleNodes();
|
|
372
|
+
bindBodyHorizontalScroll();
|
|
373
|
+
bindHeaderScrollTarget();
|
|
304
374
|
});
|
|
305
375
|
return (_ctx, _cache) => {
|
|
306
376
|
return (_openBlock(), _createElementBlock("div", {
|
|
307
377
|
class: _normalizeClass(['virtual-table-wrapper', _unref(hashId)])
|
|
308
378
|
}, [
|
|
309
|
-
_createElementVNode("div",
|
|
310
|
-
|
|
311
|
-
|
|
312
|
-
|
|
313
|
-
|
|
314
|
-
|
|
315
|
-
|
|
316
|
-
|
|
317
|
-
|
|
379
|
+
_createElementVNode("div", {
|
|
380
|
+
class: "virtual-table-header",
|
|
381
|
+
ref_key: "headerContainer",
|
|
382
|
+
ref: headerContainer
|
|
383
|
+
}, [
|
|
384
|
+
_createElementVNode("div", _hoisted_1, [
|
|
385
|
+
_createVNode(_unref(Table), _mergeProps(props, {
|
|
386
|
+
columns: _columns.value,
|
|
387
|
+
pagination: false,
|
|
388
|
+
rowKey: __props.rowKey,
|
|
389
|
+
"data-source": [],
|
|
390
|
+
components: {
|
|
391
|
+
body: { wrapper: () => h('div') },
|
|
318
392
|
},
|
|
319
|
-
|
|
320
|
-
|
|
321
|
-
|
|
322
|
-
|
|
323
|
-
|
|
324
|
-
|
|
325
|
-
|
|
326
|
-
|
|
327
|
-
|
|
328
|
-
|
|
329
|
-
|
|
330
|
-
|
|
331
|
-
|
|
332
|
-
|
|
333
|
-
|
|
334
|
-
|
|
335
|
-
|
|
336
|
-
|
|
337
|
-
|
|
338
|
-
|
|
339
|
-
|
|
340
|
-
|
|
341
|
-
|
|
342
|
-
|
|
343
|
-
|
|
344
|
-
|
|
345
|
-
|
|
346
|
-
|
|
393
|
+
"row-selection": false
|
|
394
|
+
}), {
|
|
395
|
+
headerCell: _withCtx(({ column, title }) => [
|
|
396
|
+
(column.key === '__selection__')
|
|
397
|
+
? (_openBlock(), _createElementBlock("span", _hoisted_2, [
|
|
398
|
+
(__props.rowSelection.type !== 'radio' && !__props.rowSelection.hideSelectAll)
|
|
399
|
+
? (_openBlock(), _createBlock(_unref(Checkbox), {
|
|
400
|
+
key: 0,
|
|
401
|
+
checked: selectedAll.value,
|
|
402
|
+
"onUpdate:checked": _cache[0] || (_cache[0] = $event => ((selectedAll).value = $event)),
|
|
403
|
+
onChange: onSelectedAllChange,
|
|
404
|
+
indeterminate: _indeterminate.value,
|
|
405
|
+
disabled: visibleRows.value.length === 0
|
|
406
|
+
}, null, 8 /* PROPS */, ["checked", "indeterminate", "disabled"]))
|
|
407
|
+
: _createCommentVNode("v-if", true),
|
|
408
|
+
_createElementVNode("span", null, _toDisplayString(_optionalChain([__props, 'access', _20 => _20.rowSelection, 'optionalAccess', _21 => _21.columnTitle])), 1 /* TEXT */)
|
|
409
|
+
]))
|
|
410
|
+
: _renderSlot(_ctx.$slots, "headerCell", {
|
|
411
|
+
key: 1,
|
|
412
|
+
title: title,
|
|
413
|
+
column: column
|
|
414
|
+
}, () => [
|
|
415
|
+
_createTextVNode(_toDisplayString(title), 1 /* TEXT */)
|
|
416
|
+
])
|
|
417
|
+
]),
|
|
418
|
+
_: 3 /* FORWARDED */
|
|
419
|
+
}, 16 /* FULL_PROPS */, ["columns", "rowKey", "components"])
|
|
420
|
+
])
|
|
421
|
+
], 512 /* NEED_PATCH */),
|
|
347
422
|
_createElementVNode("div", {
|
|
348
423
|
class: "virtual-table-body",
|
|
349
424
|
ref_key: "container",
|
|
@@ -357,16 +432,16 @@ const __sfc_main__ = Object.assign({
|
|
|
357
432
|
}, null, 4 /* STYLE */),
|
|
358
433
|
_createElementVNode("div", {
|
|
359
434
|
class: "virtual-table-visible-box",
|
|
360
|
-
style: _normalizeStyle({ transform: `translateY(${offsetY.value}px)`, position: 'absolute', top: 0, left: 0, right: 0 })
|
|
435
|
+
style: _normalizeStyle({ transform: `translateY(${offsetY.value}px)`, position: 'absolute', top: 0, left: 0, right: 0, height: '100%' })
|
|
361
436
|
}, [
|
|
362
|
-
_createVNode(_unref(Table), {
|
|
437
|
+
_createVNode(_unref(Table), _mergeProps(props, {
|
|
363
438
|
columns: __props.columns,
|
|
364
439
|
rowKey: __props.rowKey,
|
|
365
440
|
"data-source": visibleRows.value,
|
|
366
441
|
showHeader: false,
|
|
367
442
|
pagination: false,
|
|
368
443
|
rowSelection: _rowSelection.value
|
|
369
|
-
}, {
|
|
444
|
+
}), {
|
|
370
445
|
bodyCell: _withCtx(({ text, record, index, column }) => [
|
|
371
446
|
((firstColumn.value.dataIndex && column.dataIndex === firstColumn.value.dataIndex) || (firstColumn.value.key && column.key === firstColumn.value.key))
|
|
372
447
|
? (_openBlock(), _createElementBlock(_Fragment, { key: 0 }, [
|
|
@@ -397,7 +472,7 @@ const __sfc_main__ = Object.assign({
|
|
|
397
472
|
])
|
|
398
473
|
]),
|
|
399
474
|
_: 3 /* FORWARDED */
|
|
400
|
-
},
|
|
475
|
+
}, 16 /* FULL_PROPS */, ["columns", "rowKey", "data-source", "rowSelection"])
|
|
401
476
|
], 4 /* STYLE */)
|
|
402
477
|
], 36 /* STYLE, NEED_HYDRATION */)
|
|
403
478
|
], 2 /* CLASS */));
|
package/lib/VirtualTable/data.js
CHANGED
|
@@ -4,10 +4,11 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
|
|
|
4
4
|
Object.defineProperty(exports, "__esModule", {
|
|
5
5
|
value: true
|
|
6
6
|
});
|
|
7
|
-
exports.flattenTree = exports.findAllChildren = void 0;
|
|
7
|
+
exports.flattenTree = exports.findAllChildren = exports._headerProps = exports._contentProps = void 0;
|
|
8
8
|
var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
|
|
9
9
|
var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
|
|
10
10
|
var _lodashEs = require("lodash");
|
|
11
|
+
var _table = require("ant-design-vue/es/table");
|
|
11
12
|
// 扁平化数据
|
|
12
13
|
|
|
13
14
|
var _flattenTree = exports.flattenTree = function flattenTree(tree) {
|
|
@@ -44,4 +45,45 @@ var findAllChildren = exports.findAllChildren = function findAllChildren() {
|
|
|
44
45
|
}
|
|
45
46
|
recursive(parentId);
|
|
46
47
|
return result;
|
|
47
|
-
};
|
|
48
|
+
};
|
|
49
|
+
var _headerProps = exports._headerProps = {
|
|
50
|
+
mode: {
|
|
51
|
+
type: [String, undefined],
|
|
52
|
+
default: undefined
|
|
53
|
+
},
|
|
54
|
+
modeValue: {
|
|
55
|
+
type: String,
|
|
56
|
+
default: 'TABLE'
|
|
57
|
+
}
|
|
58
|
+
};
|
|
59
|
+
var _contentProps = exports._contentProps = (0, _objectSpread2.default)((0, _objectSpread2.default)((0, _objectSpread2.default)({}, (0, _table.tableProps)()), _headerProps), {}, {
|
|
60
|
+
dataSource: {
|
|
61
|
+
type: Array,
|
|
62
|
+
default: function _default() {
|
|
63
|
+
return [];
|
|
64
|
+
}
|
|
65
|
+
},
|
|
66
|
+
columns: {
|
|
67
|
+
type: Array,
|
|
68
|
+
default: function _default() {
|
|
69
|
+
return [];
|
|
70
|
+
}
|
|
71
|
+
},
|
|
72
|
+
expandedRowKeys: {
|
|
73
|
+
type: Array,
|
|
74
|
+
default: function _default() {
|
|
75
|
+
return [];
|
|
76
|
+
}
|
|
77
|
+
},
|
|
78
|
+
rowSelection: {
|
|
79
|
+
type: Object
|
|
80
|
+
},
|
|
81
|
+
rowKey: {
|
|
82
|
+
type: [String, Function],
|
|
83
|
+
default: 'id'
|
|
84
|
+
},
|
|
85
|
+
height: {
|
|
86
|
+
type: Number,
|
|
87
|
+
default: 500
|
|
88
|
+
}
|
|
89
|
+
});
|
|
@@ -12,9 +12,11 @@ var genVirtualTableStyle = function genVirtualTableStyle() {
|
|
|
12
12
|
display: 'flex',
|
|
13
13
|
'flex-direction': 'column',
|
|
14
14
|
'.virtual-table-header': {
|
|
15
|
+
overflow: 'hidden',
|
|
15
16
|
'.ant-table': {
|
|
16
17
|
'.ant-table-container': {
|
|
17
18
|
'.ant-table-content': {
|
|
19
|
+
overflow: 'hidden !important',
|
|
18
20
|
'.ant-table-tbody': {
|
|
19
21
|
display: 'none'
|
|
20
22
|
}
|
|
@@ -27,6 +29,10 @@ var genVirtualTableStyle = function genVirtualTableStyle() {
|
|
|
27
29
|
position: 'relative',
|
|
28
30
|
'min-height': '100px'
|
|
29
31
|
},
|
|
32
|
+
'.virtual-table-header-fixed': {
|
|
33
|
+
// 位移的容器，提升位移动画性能
|
|
34
|
+
'will-change': 'transform'
|
|
35
|
+
},
|
|
30
36
|
'.virtual-table-row-expand-icon': {
|
|
31
37
|
'margin-right': '8px',
|
|
32
38
|
'font-size': 'relative',
|