@jetlinks-web/components 3.1.13 → 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.
Files changed (17) hide show
  1. package/es/EditTable/FormItem.js +0 -1
  2. package/es/ProTable/Content.js +3 -4
  3. package/es/ProTable/ProTable.js +26 -26
  4. package/es/Search/Advanced/index.js +2 -1
  5. package/es/Search/Search.js +2 -1
  6. package/es/VirtualTable/VirtualTable.js +122 -47
  7. package/es/VirtualTable/data.js +43 -1
  8. package/es/VirtualTable/style/index.js +6 -0
  9. package/lib/EditTable/FormItem.js +0 -1
  10. package/lib/ProTable/Content.js +3 -4
  11. package/lib/ProTable/ProTable.js +26 -26
  12. package/lib/Search/Advanced/index.js +2 -1
  13. package/lib/Search/Search.js +2 -1
  14. package/lib/VirtualTable/VirtualTable.js +122 -47
  15. package/lib/VirtualTable/data.js +44 -2
  16. package/lib/VirtualTable/style/index.js +6 -0
  17. package/package.json +3 -3
package/es/EditTable/FormItem.js CHANGED
@@ -152,7 +152,6 @@ const __sfc_main__ = Object.assign({
152
152
  // validateRules()
153
153
  };
154
154
  const onFieldChange = () => {
155
- debugger;
156
155
  validateRules();
157
156
  emit('change');
158
157
  };
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
- ]), 1032 /* PROPS, DYNAMIC_SLOTS */, ["rowKey", "row-selection", "dataSource", "columns", "height"]))
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/ProTable.js CHANGED
@@ -116,7 +116,7 @@ const __sfc_main__ = _defineComponent({
116
116
  const column = ref(4);
117
117
  const page = reactive({
118
118
  pageIndex: 0,
119
- pageSize: 12,
119
+ pageSize: _optionalChain([tableConfig, 'access', _2 => _2.pagination, 'optionalAccess', _3 => _3.pageSize]) || 12,
120
120
  total: 0,
121
121
  loading: false
122
122
  });
@@ -127,7 +127,7 @@ const __sfc_main__ = _defineComponent({
127
127
  const extraSlots = ['headerRightRender', 'headerLeftRender', 'paginationRender', 'alertRender'];
128
128
  const _rowSelection = useTableInject();
129
129
  const showAlert = computed(() => {
130
- return props.alertShow && (_optionalChain([props, 'access', _2 => _2.rowSelection, 'optionalAccess', _3 => _3.selectedRowKeys, 'optionalAccess', _4 => _4.length]) || _optionalChain([_rowSelection, 'optionalAccess', _5 => _5.value, 'optionalAccess', _6 => _6.selectedRowKeys, 'optionalAccess', _7 => _7.length]));
130
+ return props.alertShow && (_optionalChain([props, 'access', _4 => _4.rowSelection, 'optionalAccess', _5 => _5.selectedRowKeys, 'optionalAccess', _6 => _6.length]) || _optionalChain([_rowSelection, 'optionalAccess', _7 => _7.value, 'optionalAccess', _8 => _8.selectedRowKeys, 'optionalAccess', _9 => _9.length]));
131
131
  });
132
132
  const showPagination = computed(() => {
133
133
  return !!_dataSource.value.length && !props.noPagination && props.type === 'PAGE';
@@ -145,23 +145,23 @@ const __sfc_main__ = _defineComponent({
145
145
  }
146
146
  else {
147
147
  _dataSource.value = result || [];
148
- page.pageIndex = _optionalChain([_params, 'optionalAccess', _8 => _8.pageIndex]) || 0;
149
- page.pageSize = _optionalChain([_params, 'optionalAccess', _9 => _9.pageSize]) || 12;
148
+ page.pageIndex = _optionalChain([_params, 'optionalAccess', _10 => _10.pageIndex]) || 0;
149
+ page.pageSize = _optionalChain([_params, 'optionalAccess', _11 => _11.pageSize]) || 12;
150
150
  page.total = page.pageSize * (page.pageIndex + 1) + 1;
151
151
  }
152
152
  }
153
153
  else {
154
- if (_optionalChain([result, 'optionalAccess', _10 => _10.total]) &&
155
- _optionalChain([result, 'optionalAccess', _11 => _11.pageSize]) &&
156
- _optionalChain([result, 'optionalAccess', _12 => _12.pageIndex]) &&
157
- _optionalChain([result, 'optionalAccess', _13 => _13.data, 'optionalAccess', _14 => _14.length]) === 0) {
154
+ if (_optionalChain([result, 'optionalAccess', _12 => _12.total]) &&
155
+ _optionalChain([result, 'optionalAccess', _13 => _13.pageSize]) &&
156
+ _optionalChain([result, 'optionalAccess', _14 => _14.pageIndex]) &&
157
+ _optionalChain([result, 'optionalAccess', _15 => _15.data, 'optionalAccess', _16 => _16.length]) === 0) {
158
158
  return true;
159
159
  }
160
160
  else {
161
- _dataSource.value = _optionalChain([result, 'optionalAccess', _15 => _15.data]) || [];
162
- page.pageIndex = _optionalChain([result, 'optionalAccess', _16 => _16.pageIndex]) || 0;
163
- page.pageSize = _optionalChain([result, 'optionalAccess', _17 => _17.pageSize]) || 12;
164
- page.total = _optionalChain([result, 'optionalAccess', _18 => _18.total]) || 0;
161
+ _dataSource.value = _optionalChain([result, 'optionalAccess', _17 => _17.data]) || [];
162
+ page.pageIndex = _optionalChain([result, 'optionalAccess', _18 => _18.pageIndex]) || 0;
163
+ page.pageSize = _optionalChain([result, 'optionalAccess', _19 => _19.pageSize]) || 12;
164
+ page.total = _optionalChain([result, 'optionalAccess', _20 => _20.total]) || 0;
165
165
  }
166
166
  }
167
167
  }
@@ -181,8 +181,8 @@ const __sfc_main__ = _defineComponent({
181
181
  ...props.defaultParams,
182
182
  ..._params,
183
183
  terms: [
184
- ...(_optionalChain([props, 'access', _19 => _19.defaultParams, 'optionalAccess', _20 => _20.terms]) || []),
185
- ...(_optionalChain([_params, 'optionalAccess', _21 => _21.terms]) || []),
184
+ ...(_optionalChain([props, 'access', _21 => _21.defaultParams, 'optionalAccess', _22 => _22.terms]) || []),
185
+ ...(_optionalChain([_params, 'optionalAccess', _23 => _23.terms]) || []),
186
186
  ],
187
187
  };
188
188
  loading.value = true;
@@ -193,7 +193,7 @@ const __sfc_main__ = _defineComponent({
193
193
  const flag = handleData(resp.result || {}, _params);
194
194
  if (flag) { // 判断如果是最后一页且最后一页为空，就跳转到前一页
195
195
  if (props.totalRequest) {
196
- onlyMessage(_optionalChain([contextLocale, 'access', _22 => _22.value, 'access', _23 => _23.pagination, 'optionalAccess', _24 => _24.lastPage]) || '', 'error');
196
+ onlyMessage(_optionalChain([contextLocale, 'access', _24 => _24.value, 'access', _25 => _25.pagination, 'optionalAccess', _26 => _26.lastPage]) || '', 'error');
197
197
  // 置灰下一页
198
198
  page.total = page.pageSize * (page.pageIndex > 0 ? page.pageIndex : 1);
199
199
  }
@@ -239,11 +239,11 @@ const __sfc_main__ = _defineComponent({
239
239
  };
240
240
  const onClose = () => {
241
241
  if (props.rowSelection) {
242
- _optionalChain([props, 'access', _25 => _25.rowSelection, 'access', _26 => _26.onChange, 'optionalCall', _27 => _27([], [])]);
243
- _optionalChain([props, 'access', _28 => _28.rowSelection, 'access', _29 => _29.onSelectNone, 'optionalCall', _30 => _30()]);
242
+ _optionalChain([props, 'access', _27 => _27.rowSelection, 'access', _28 => _28.onChange, 'optionalCall', _29 => _29([], [])]);
243
+ _optionalChain([props, 'access', _30 => _30.rowSelection, 'access', _31 => _31.onSelectNone, 'optionalCall', _32 => _32()]);
244
244
  }
245
- else if (_optionalChain([_rowSelection, 'optionalAccess', _31 => _31.value])) {
246
- _optionalChain([_rowSelection, 'access', _32 => _32.value, 'optionalAccess', _33 => _33.onSelectNone, 'optionalCall', _34 => _34()]);
245
+ else if (_optionalChain([_rowSelection, 'optionalAccess', _33 => _33.value])) {
246
+ _optionalChain([_rowSelection, 'access', _34 => _34.value, 'optionalAccess', _35 => _35.onSelectNone, 'optionalCall', _36 => _36()]);
247
247
  }
248
248
  };
249
249
  /**
@@ -259,10 +259,10 @@ const __sfc_main__ = _defineComponent({
259
259
  });
260
260
  };
261
261
  const _gridColumns = computed(() => {
262
- if (_optionalChain([props, 'access', _35 => _35.gridColumns, 'optionalAccess', _36 => _36.length])) {
262
+ if (_optionalChain([props, 'access', _37 => _37.gridColumns, 'optionalAccess', _38 => _38.length])) {
263
263
  const arr = props.gridColumns;
264
- const lastValue = _optionalChain([arr, 'access', _37 => _37.slice, 'call', _38 => _38(-1), 'optionalAccess', _39 => _39[0]]);
265
- if (_optionalChain([arr, 'optionalAccess', _40 => _40.length]) < 4) {
264
+ const lastValue = _optionalChain([arr, 'access', _39 => _39.slice, 'call', _40 => _40(-1), 'optionalAccess', _41 => _41[0]]);
265
+ if (_optionalChain([arr, 'optionalAccess', _42 => _42.length]) < 4) {
266
266
  while (arr.length < 4) {
267
267
  arr.push(lastValue);
268
268
  }
@@ -283,16 +283,16 @@ const __sfc_main__ = _defineComponent({
283
283
  const styles = window.getComputedStyle(ele);
284
284
  const width = parseFloat(styles.width);
285
285
  if (width <= 992) {
286
- column.value = _optionalChain([_gridColumns, 'access', _41 => _41.value, 'optionalAccess', _42 => _42[0]]) || 1;
286
+ column.value = _optionalChain([_gridColumns, 'access', _43 => _43.value, 'optionalAccess', _44 => _44[0]]) || 1;
287
287
  }
288
288
  else if (width > 992 && width <= 1440) {
289
- column.value = _optionalChain([_gridColumns, 'access', _43 => _43.value, 'optionalAccess', _44 => _44[1]]) || 2;
289
+ column.value = _optionalChain([_gridColumns, 'access', _45 => _45.value, 'optionalAccess', _46 => _46[1]]) || 2;
290
290
  }
291
291
  else if (width > 1440 && width <= 1600) {
292
- column.value = _optionalChain([_gridColumns, 'access', _45 => _45.value, 'optionalAccess', _46 => _46[2]]) || 3;
292
+ column.value = _optionalChain([_gridColumns, 'access', _47 => _47.value, 'optionalAccess', _48 => _48[2]]) || 3;
293
293
  }
294
294
  else if (width > 1600) {
295
- column.value = _optionalChain([_gridColumns, 'access', _47 => _47.value, 'optionalAccess', _48 => _48[3]]) || 4;
295
+ column.value = _optionalChain([_gridColumns, 'access', _49 => _49.value, 'optionalAccess', _50 => _50[3]]) || 4;
296
296
  }
297
297
  }
298
298
  };
package/es/Search/Advanced/index.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]';
package/es/VirtualTable/VirtualTable.js CHANGED
@@ -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
- console.log('123');
270
- nextTick(() => onScroll({ target: container.value }));
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', _5 => _5.rowSelection, 'optionalAccess', _6 => _6.selectedRowKeys]), (val) => {
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", _hoisted_1, [
310
- _createVNode(_unref(Table), {
311
- columns: _columns.value,
312
- pagination: false,
313
- rowKey: __props.rowKey,
314
- "data-source": [],
315
- components: {
316
- body: {
317
- wrapper: () => h('div')
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
- headerCell: _withCtx(({ column, title }) => [
322
- (column.key === '__selection__')
323
- ? (_openBlock(), _createElementBlock("span", _hoisted_2, [
324
- (__props.rowSelection.type !== 'radio' && !__props.rowSelection.hideSelectAll)
325
- ? (_openBlock(), _createBlock(_unref(Checkbox), {
326
- key: 0,
327
- checked: selectedAll.value,
328
- "onUpdate:checked": _cache[0] || (_cache[0] = $event => ((selectedAll).value = $event)),
329
- onChange: onSelectedAllChange,
330
- indeterminate: _indeterminate.value,
331
- disabled: visibleRows.value.length === 0
332
- }, null, 8 /* PROPS */, ["checked", "indeterminate", "disabled"]))
333
- : _createCommentVNode("v-if", true),
334
- _createElementVNode("span", null, _toDisplayString(_optionalChain([__props, 'access', _7 => _7.rowSelection, 'optionalAccess', _8 => _8.columnTitle])), 1 /* TEXT */)
335
- ]))
336
- : _renderSlot(_ctx.$slots, "headerCell", {
337
- key: 1,
338
- title: title,
339
- column: column
340
- }, () => [
341
- _createTextVNode(_toDisplayString(title), 1 /* TEXT */)
342
- ])
343
- ]),
344
- _: 3 /* FORWARDED */
345
- }, 8 /* PROPS */, ["columns", "rowKey", "components"])
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
- }, 8 /* PROPS */, ["columns", "rowKey", "data-source", "rowSelection"])
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
+ });
package/es/VirtualTable/style/index.js CHANGED
@@ -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/EditTable/FormItem.js CHANGED
@@ -152,7 +152,6 @@ const __sfc_main__ = Object.assign({
152
152
  // validateRules()
153
153
  };
154
154
  const onFieldChange = () => {
155
- debugger;
156
155
  validateRules();
157
156
  emit('change');
158
157
  };
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
- ]), 1032 /* PROPS, DYNAMIC_SLOTS */, ["rowKey", "row-selection", "dataSource", "columns", "height"]))
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/ProTable.js CHANGED
@@ -116,7 +116,7 @@ const __sfc_main__ = _defineComponent({
116
116
  const column = ref(4);
117
117
  const page = reactive({
118
118
  pageIndex: 0,
119
- pageSize: 12,
119
+ pageSize: _optionalChain([tableConfig, 'access', _2 => _2.pagination, 'optionalAccess', _3 => _3.pageSize]) || 12,
120
120
  total: 0,
121
121
  loading: false
122
122
  });
@@ -127,7 +127,7 @@ const __sfc_main__ = _defineComponent({
127
127
  const extraSlots = ['headerRightRender', 'headerLeftRender', 'paginationRender', 'alertRender'];
128
128
  const _rowSelection = useTableInject();
129
129
  const showAlert = computed(() => {
130
- return props.alertShow && (_optionalChain([props, 'access', _2 => _2.rowSelection, 'optionalAccess', _3 => _3.selectedRowKeys, 'optionalAccess', _4 => _4.length]) || _optionalChain([_rowSelection, 'optionalAccess', _5 => _5.value, 'optionalAccess', _6 => _6.selectedRowKeys, 'optionalAccess', _7 => _7.length]));
130
+ return props.alertShow && (_optionalChain([props, 'access', _4 => _4.rowSelection, 'optionalAccess', _5 => _5.selectedRowKeys, 'optionalAccess', _6 => _6.length]) || _optionalChain([_rowSelection, 'optionalAccess', _7 => _7.value, 'optionalAccess', _8 => _8.selectedRowKeys, 'optionalAccess', _9 => _9.length]));
131
131
  });
132
132
  const showPagination = computed(() => {
133
133
  return !!_dataSource.value.length && !props.noPagination && props.type === 'PAGE';
@@ -145,23 +145,23 @@ const __sfc_main__ = _defineComponent({
145
145
  }
146
146
  else {
147
147
  _dataSource.value = result || [];
148
- page.pageIndex = _optionalChain([_params, 'optionalAccess', _8 => _8.pageIndex]) || 0;
149
- page.pageSize = _optionalChain([_params, 'optionalAccess', _9 => _9.pageSize]) || 12;
148
+ page.pageIndex = _optionalChain([_params, 'optionalAccess', _10 => _10.pageIndex]) || 0;
149
+ page.pageSize = _optionalChain([_params, 'optionalAccess', _11 => _11.pageSize]) || 12;
150
150
  page.total = page.pageSize * (page.pageIndex + 1) + 1;
151
151
  }
152
152
  }
153
153
  else {
154
- if (_optionalChain([result, 'optionalAccess', _10 => _10.total]) &&
155
- _optionalChain([result, 'optionalAccess', _11 => _11.pageSize]) &&
156
- _optionalChain([result, 'optionalAccess', _12 => _12.pageIndex]) &&
157
- _optionalChain([result, 'optionalAccess', _13 => _13.data, 'optionalAccess', _14 => _14.length]) === 0) {
154
+ if (_optionalChain([result, 'optionalAccess', _12 => _12.total]) &&
155
+ _optionalChain([result, 'optionalAccess', _13 => _13.pageSize]) &&
156
+ _optionalChain([result, 'optionalAccess', _14 => _14.pageIndex]) &&
157
+ _optionalChain([result, 'optionalAccess', _15 => _15.data, 'optionalAccess', _16 => _16.length]) === 0) {
158
158
  return true;
159
159
  }
160
160
  else {
161
- _dataSource.value = _optionalChain([result, 'optionalAccess', _15 => _15.data]) || [];
162
- page.pageIndex = _optionalChain([result, 'optionalAccess', _16 => _16.pageIndex]) || 0;
163
- page.pageSize = _optionalChain([result, 'optionalAccess', _17 => _17.pageSize]) || 12;
164
- page.total = _optionalChain([result, 'optionalAccess', _18 => _18.total]) || 0;
161
+ _dataSource.value = _optionalChain([result, 'optionalAccess', _17 => _17.data]) || [];
162
+ page.pageIndex = _optionalChain([result, 'optionalAccess', _18 => _18.pageIndex]) || 0;
163
+ page.pageSize = _optionalChain([result, 'optionalAccess', _19 => _19.pageSize]) || 12;
164
+ page.total = _optionalChain([result, 'optionalAccess', _20 => _20.total]) || 0;
165
165
  }
166
166
  }
167
167
  }
@@ -181,8 +181,8 @@ const __sfc_main__ = _defineComponent({
181
181
  ...props.defaultParams,
182
182
  ..._params,
183
183
  terms: [
184
- ...(_optionalChain([props, 'access', _19 => _19.defaultParams, 'optionalAccess', _20 => _20.terms]) || []),
185
- ...(_optionalChain([_params, 'optionalAccess', _21 => _21.terms]) || []),
184
+ ...(_optionalChain([props, 'access', _21 => _21.defaultParams, 'optionalAccess', _22 => _22.terms]) || []),
185
+ ...(_optionalChain([_params, 'optionalAccess', _23 => _23.terms]) || []),
186
186
  ],
187
187
  };
188
188
  loading.value = true;
@@ -193,7 +193,7 @@ const __sfc_main__ = _defineComponent({
193
193
  const flag = handleData(resp.result || {}, _params);
194
194
  if (flag) { // 判断如果是最后一页且最后一页为空，就跳转到前一页
195
195
  if (props.totalRequest) {
196
- onlyMessage(_optionalChain([contextLocale, 'access', _22 => _22.value, 'access', _23 => _23.pagination, 'optionalAccess', _24 => _24.lastPage]) || '', 'error');
196
+ onlyMessage(_optionalChain([contextLocale, 'access', _24 => _24.value, 'access', _25 => _25.pagination, 'optionalAccess', _26 => _26.lastPage]) || '', 'error');
197
197
  // 置灰下一页
198
198
  page.total = page.pageSize * (page.pageIndex > 0 ? page.pageIndex : 1);
199
199
  }
@@ -239,11 +239,11 @@ const __sfc_main__ = _defineComponent({
239
239
  };
240
240
  const onClose = () => {
241
241
  if (props.rowSelection) {
242
- _optionalChain([props, 'access', _25 => _25.rowSelection, 'access', _26 => _26.onChange, 'optionalCall', _27 => _27([], [])]);
243
- _optionalChain([props, 'access', _28 => _28.rowSelection, 'access', _29 => _29.onSelectNone, 'optionalCall', _30 => _30()]);
242
+ _optionalChain([props, 'access', _27 => _27.rowSelection, 'access', _28 => _28.onChange, 'optionalCall', _29 => _29([], [])]);
243
+ _optionalChain([props, 'access', _30 => _30.rowSelection, 'access', _31 => _31.onSelectNone, 'optionalCall', _32 => _32()]);
244
244
  }
245
- else if (_optionalChain([_rowSelection, 'optionalAccess', _31 => _31.value])) {
246
- _optionalChain([_rowSelection, 'access', _32 => _32.value, 'optionalAccess', _33 => _33.onSelectNone, 'optionalCall', _34 => _34()]);
245
+ else if (_optionalChain([_rowSelection, 'optionalAccess', _33 => _33.value])) {
246
+ _optionalChain([_rowSelection, 'access', _34 => _34.value, 'optionalAccess', _35 => _35.onSelectNone, 'optionalCall', _36 => _36()]);
247
247
  }
248
248
  };
249
249
  /**
@@ -259,10 +259,10 @@ const __sfc_main__ = _defineComponent({
259
259
  });
260
260
  };
261
261
  const _gridColumns = computed(() => {
262
- if (_optionalChain([props, 'access', _35 => _35.gridColumns, 'optionalAccess', _36 => _36.length])) {
262
+ if (_optionalChain([props, 'access', _37 => _37.gridColumns, 'optionalAccess', _38 => _38.length])) {
263
263
  const arr = props.gridColumns;
264
- const lastValue = _optionalChain([arr, 'access', _37 => _37.slice, 'call', _38 => _38(-1), 'optionalAccess', _39 => _39[0]]);
265
- if (_optionalChain([arr, 'optionalAccess', _40 => _40.length]) < 4) {
264
+ const lastValue = _optionalChain([arr, 'access', _39 => _39.slice, 'call', _40 => _40(-1), 'optionalAccess', _41 => _41[0]]);
265
+ if (_optionalChain([arr, 'optionalAccess', _42 => _42.length]) < 4) {
266
266
  while (arr.length < 4) {
267
267
  arr.push(lastValue);
268
268
  }
@@ -283,16 +283,16 @@ const __sfc_main__ = _defineComponent({
283
283
  const styles = window.getComputedStyle(ele);
284
284
  const width = parseFloat(styles.width);
285
285
  if (width <= 992) {
286
- column.value = _optionalChain([_gridColumns, 'access', _41 => _41.value, 'optionalAccess', _42 => _42[0]]) || 1;
286
+ column.value = _optionalChain([_gridColumns, 'access', _43 => _43.value, 'optionalAccess', _44 => _44[0]]) || 1;
287
287
  }
288
288
  else if (width > 992 && width <= 1440) {
289
- column.value = _optionalChain([_gridColumns, 'access', _43 => _43.value, 'optionalAccess', _44 => _44[1]]) || 2;
289
+ column.value = _optionalChain([_gridColumns, 'access', _45 => _45.value, 'optionalAccess', _46 => _46[1]]) || 2;
290
290
  }
291
291
  else if (width > 1440 && width <= 1600) {
292
- column.value = _optionalChain([_gridColumns, 'access', _45 => _45.value, 'optionalAccess', _46 => _46[2]]) || 3;
292
+ column.value = _optionalChain([_gridColumns, 'access', _47 => _47.value, 'optionalAccess', _48 => _48[2]]) || 3;
293
293
  }
294
294
  else if (width > 1600) {
295
- column.value = _optionalChain([_gridColumns, 'access', _47 => _47.value, 'optionalAccess', _48 => _48[3]]) || 4;
295
+ column.value = _optionalChain([_gridColumns, 'access', _49 => _49.value, 'optionalAccess', _50 => _50[3]]) || 4;
296
296
  }
297
297
  }
298
298
  };
package/lib/Search/Advanced/index.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]';
package/lib/VirtualTable/VirtualTable.js CHANGED
@@ -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
- console.log('123');
270
- nextTick(() => onScroll({ target: container.value }));
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', _5 => _5.rowSelection, 'optionalAccess', _6 => _6.selectedRowKeys]), (val) => {
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", _hoisted_1, [
310
- _createVNode(_unref(Table), {
311
- columns: _columns.value,
312
- pagination: false,
313
- rowKey: __props.rowKey,
314
- "data-source": [],
315
- components: {
316
- body: {
317
- wrapper: () => h('div')
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
- headerCell: _withCtx(({ column, title }) => [
322
- (column.key === '__selection__')
323
- ? (_openBlock(), _createElementBlock("span", _hoisted_2, [
324
- (__props.rowSelection.type !== 'radio' && !__props.rowSelection.hideSelectAll)
325
- ? (_openBlock(), _createBlock(_unref(Checkbox), {
326
- key: 0,
327
- checked: selectedAll.value,
328
- "onUpdate:checked": _cache[0] || (_cache[0] = $event => ((selectedAll).value = $event)),
329
- onChange: onSelectedAllChange,
330
- indeterminate: _indeterminate.value,
331
- disabled: visibleRows.value.length === 0
332
- }, null, 8 /* PROPS */, ["checked", "indeterminate", "disabled"]))
333
- : _createCommentVNode("v-if", true),
334
- _createElementVNode("span", null, _toDisplayString(_optionalChain([__props, 'access', _7 => _7.rowSelection, 'optionalAccess', _8 => _8.columnTitle])), 1 /* TEXT */)
335
- ]))
336
- : _renderSlot(_ctx.$slots, "headerCell", {
337
- key: 1,
338
- title: title,
339
- column: column
340
- }, () => [
341
- _createTextVNode(_toDisplayString(title), 1 /* TEXT */)
342
- ])
343
- ]),
344
- _: 3 /* FORWARDED */
345
- }, 8 /* PROPS */, ["columns", "rowKey", "components"])
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
- }, 8 /* PROPS */, ["columns", "rowKey", "data-source", "rowSelection"])
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
+ });
package/lib/VirtualTable/style/index.js CHANGED
@@ -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',
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@jetlinks-web/components",
3
- "version": "3.1.13",
3
+ "version": "3.1.15",
4
4
  "description": "",
5
5
  "main": "lib/index.js",
6
6
  "module": "es/index.js",
@@ -155,8 +155,8 @@
155
155
  "webpack-merge": "^5.0.0",
156
156
  "webpackbar": "^5.0.2",
157
157
  "@jetlinks-web/constants": "^1.0.9",
158
- "@jetlinks-web/utils": "^1.2.12",
159
- "@jetlinks-web/hooks": "^1.1.1"
158
+ "@jetlinks-web/hooks": "^1.1.1",
159
+ "@jetlinks-web/utils": "^1.2.12"
160
160
  },
161
161
  "publishConfig": {
162
162
  "registry": "https://registry.npmjs.org/",