vxe-table 3.10.15 → 3.11.0

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 (72) hide show
  1. package/README.md +1 -1
  2. package/es/style.css +1 -1
  3. package/es/style.min.css +1 -1
  4. package/es/table/module/custom/mixin.js +5 -1
  5. package/es/table/module/edit/mixin.js +24 -15
  6. package/es/table/module/validator/mixin.js +31 -10
  7. package/es/table/src/body.js +40 -24
  8. package/es/table/src/cell.js +75 -32
  9. package/es/table/src/footer.js +159 -131
  10. package/es/table/src/header.js +128 -90
  11. package/es/table/src/methods.js +292 -66
  12. package/es/table/src/props.js +5 -1
  13. package/es/table/src/table.js +64 -20
  14. package/es/table/style.css +33 -20
  15. package/es/table/style.min.css +1 -1
  16. package/es/ui/index.js +9 -4
  17. package/es/ui/src/log.js +1 -1
  18. package/es/vxe-table/style.css +33 -20
  19. package/es/vxe-table/style.min.css +1 -1
  20. package/helper/vetur/attributes.json +1 -1
  21. package/helper/vetur/tags.json +1 -1
  22. package/lib/index.umd.js +945 -460
  23. package/lib/index.umd.min.js +1 -1
  24. package/lib/style.css +1 -1
  25. package/lib/style.min.css +1 -1
  26. package/lib/table/module/custom/mixin.js +5 -1
  27. package/lib/table/module/custom/mixin.min.js +1 -1
  28. package/lib/table/module/edit/mixin.js +24 -15
  29. package/lib/table/module/edit/mixin.min.js +1 -1
  30. package/lib/table/module/validator/mixin.js +31 -10
  31. package/lib/table/module/validator/mixin.min.js +1 -1
  32. package/lib/table/src/body.js +31 -15
  33. package/lib/table/src/body.min.js +1 -1
  34. package/lib/table/src/cell.js +82 -35
  35. package/lib/table/src/cell.min.js +1 -1
  36. package/lib/table/src/footer.js +198 -161
  37. package/lib/table/src/footer.min.js +1 -1
  38. package/lib/table/src/header.js +169 -128
  39. package/lib/table/src/header.min.js +1 -1
  40. package/lib/table/src/methods.js +321 -69
  41. package/lib/table/src/methods.min.js +1 -1
  42. package/lib/table/src/props.js +5 -1
  43. package/lib/table/src/props.min.js +1 -1
  44. package/lib/table/src/table.js +70 -20
  45. package/lib/table/src/table.min.js +1 -1
  46. package/lib/table/style/style.css +33 -20
  47. package/lib/table/style/style.min.css +1 -1
  48. package/lib/ui/index.js +9 -4
  49. package/lib/ui/index.min.js +1 -1
  50. package/lib/ui/src/log.js +1 -1
  51. package/lib/ui/src/log.min.js +1 -1
  52. package/lib/vxe-table/style/style.css +33 -20
  53. package/lib/vxe-table/style/style.min.css +1 -1
  54. package/package.json +3 -3
  55. package/packages/table/module/custom/mixin.ts +5 -1
  56. package/packages/table/module/edit/mixin.ts +24 -15
  57. package/packages/table/module/validator/mixin.ts +33 -10
  58. package/packages/table/src/body.ts +43 -25
  59. package/packages/table/src/cell.ts +120 -67
  60. package/packages/table/src/footer.ts +164 -150
  61. package/packages/table/src/header.ts +136 -90
  62. package/packages/table/src/methods.ts +304 -68
  63. package/packages/table/src/props.ts +5 -1
  64. package/packages/table/src/table.ts +71 -19
  65. package/packages/ui/index.ts +8 -3
  66. package/styles/components/table.scss +42 -35
  67. /package/es/{iconfont.1731574584971.ttf → iconfont.1731890707082.ttf} +0 -0
  68. /package/es/{iconfont.1731574584971.woff → iconfont.1731890707082.woff} +0 -0
  69. /package/es/{iconfont.1731574584971.woff2 → iconfont.1731890707082.woff2} +0 -0
  70. /package/lib/{iconfont.1731574584971.ttf → iconfont.1731890707082.ttf} +0 -0
  71. /package/lib/{iconfont.1731574584971.woff → iconfont.1731890707082.woff} +0 -0
  72. /package/lib/{iconfont.1731574584971.woff2 → iconfont.1731890707082.woff2} +0 -0
@@ -331,63 +331,114 @@ function updateRowDropOrigin($xeTable, row) {
331
331
  });
332
332
  }
333
333
  }
334
- function clearRowDropTarget($xeTable) {
334
+ const updateRowDropTipContent = ($xeTable, tdEl) => {
335
+ const reactData = $xeTable;
336
+ const props = $xeTable;
337
+ const { dragConfig } = props;
338
+ const { dragRow } = reactData;
339
+ const rowDragOpts = $xeTable.computeRowDragOpts;
340
+ const { tooltipMethod } = rowDragOpts;
341
+ const rTooltipMethod = tooltipMethod || (dragConfig ? dragConfig.rowTooltipMethod : null);
342
+ let tipContent = '';
343
+ if (rTooltipMethod) {
344
+ tipContent = `${rTooltipMethod({
345
+ row: dragRow
346
+ }) || ''}`;
347
+ }
348
+ else {
349
+ tipContent = getI18n('vxe.table.dragTip', [tdEl.textContent || '']);
350
+ }
351
+ reactData.dragTipText = tipContent;
352
+ };
353
+ const updateColDropOrigin = ($xeTable, column) => {
335
354
  const el = $xeTable.$el;
336
355
  if (el) {
337
- const clss = 'row--drag-active-target';
338
- XEUtils.arrayEach(el.querySelectorAll(`.${clss}`), (elem) => {
339
- removeClass(elem, clss);
356
+ const clss = 'col--drag-origin';
357
+ XEUtils.arrayEach(el.querySelectorAll(`[colid="${column.id}"]`), (elem) => {
358
+ addClass(elem, clss);
340
359
  });
341
360
  }
342
- }
343
- function updateRowDropTarget($xeTable, row, dragPos) {
361
+ };
362
+ const clearColDropOrigin = ($xeTable) => {
344
363
  const el = $xeTable.$el;
345
364
  if (el) {
346
- const clss = 'row--drag-active-target';
347
- const rowid = getRowid($xeTable, row);
348
- XEUtils.arrayEach(el.querySelectorAll(`[rowid="${rowid}"]`), (elem) => {
349
- addClass(elem, clss);
350
- elem.setAttribute('drag-pos', dragPos);
365
+ const clss = 'col--drag-origin';
366
+ XEUtils.arrayEach(el.querySelectorAll(`.${clss}`), (elem) => {
367
+ elem.draggable = false;
368
+ removeClass(elem, clss);
351
369
  });
352
370
  }
353
- }
354
- function showRowDropTip(evnt, $xeTable) {
355
- const rdTipEl = $xeTable.$refs.refRowDragTipElem;
356
- if (!rdTipEl) {
357
- return;
371
+ };
372
+ const updateColDropTipContent = ($xeTable, tdEl) => {
373
+ const reactData = $xeTable;
374
+ const { dragCol } = reactData;
375
+ const columnDragOpts = $xeTable.computeColumnDragOpts;
376
+ const { tooltipMethod } = columnDragOpts;
377
+ let tipContent = '';
378
+ if (tooltipMethod) {
379
+ tipContent = `${tooltipMethod({
380
+ column: dragCol
381
+ }) || ''}`;
358
382
  }
359
- const el = $xeTable.$el;
383
+ else {
384
+ tipContent = getI18n('vxe.table.dragTip', [tdEl.textContent || '']);
385
+ }
386
+ reactData.dragTipText = tipContent;
387
+ };
388
+ function showDropTip($xeTable, evnt, trEl, thEl, dragPos) {
389
+ const reactData = $xeTable;
390
+ const el = $xeTable.$refs.refElem;
360
391
  if (!el) {
361
392
  return;
362
393
  }
394
+ const { scrollbarWidth, scrollbarHeight } = reactData;
395
+ const wrapperRect = el.getBoundingClientRect();
396
+ if (trEl) {
397
+ const rdLineEl = $xeTable.$refs.refDragRowLineElem;
398
+ if (rdLineEl) {
399
+ const trRect = trEl.getBoundingClientRect();
400
+ let top = Math.max(1, trRect.y - wrapperRect.y);
401
+ if (dragPos === 'bottom') {
402
+ top = Math.min(wrapperRect.height - 1, trRect.y - wrapperRect.y + trRect.height);
403
+ }
404
+ rdLineEl.style.top = `${top}px`;
405
+ rdLineEl.style.width = `${wrapperRect.width - scrollbarWidth}px`;
406
+ rdLineEl.style.display = 'block';
407
+ }
408
+ }
409
+ else if (thEl) {
410
+ const cdLineEl = $xeTable.$refs.refDragColLineElem;
411
+ if (cdLineEl) {
412
+ const thRect = thEl.getBoundingClientRect();
413
+ let left = Math.max(1, thRect.x - wrapperRect.x);
414
+ if (dragPos === 'right') {
415
+ left = Math.min(wrapperRect.width - 2, thRect.x - wrapperRect.x + thRect.width);
416
+ }
417
+ cdLineEl.style.left = `${left}px`;
418
+ cdLineEl.style.height = `${wrapperRect.height - scrollbarHeight}px`;
419
+ cdLineEl.style.display = 'block';
420
+ }
421
+ }
422
+ const rdTipEl = $xeTable.$refs.refDragTipElem;
363
423
  if (rdTipEl) {
364
- const wrapperRect = el.getBoundingClientRect();
365
424
  rdTipEl.style.display = 'block';
366
425
  rdTipEl.style.top = `${Math.min(el.clientHeight - el.scrollTop - rdTipEl.clientHeight, evnt.clientY - wrapperRect.y)}px`;
367
426
  rdTipEl.style.left = `${Math.min(el.clientWidth - el.scrollLeft - rdTipEl.clientWidth - 16, evnt.clientX - wrapperRect.x)}px`;
368
427
  }
369
428
  }
370
- const hideRowDropTip = ($xeTable) => {
371
- const rdTipEl = $xeTable.$refs.refRowDragTipElem;
429
+ const hideDropTip = ($xeTable) => {
430
+ const rdTipEl = $xeTable.$refs.refDragTipElem;
431
+ const rdLineEl = $xeTable.$refs.refDragRowLineElem;
432
+ const cdLineEl = $xeTable.$refs.refDragColLineElem;
372
433
  if (rdTipEl) {
373
434
  rdTipEl.style.display = '';
374
435
  }
375
- };
376
- const updateRowDropTipContent = ($xeTable, tdEl) => {
377
- const reactData = $xeTable;
378
- const { dragRow } = reactData;
379
- const dragOpts = $xeTable.computeDragOpts;
380
- const { rowTooltipMethod } = dragOpts;
381
- let tipContent = '';
382
- if (rowTooltipMethod) {
383
- tipContent = `${rowTooltipMethod({
384
- row: dragRow
385
- }) || ''}`;
436
+ if (rdLineEl) {
437
+ rdLineEl.style.display = '';
386
438
  }
387
- else {
388
- tipContent = getI18n('vxe.table.dragTip', [tdEl.textContent || '']);
439
+ if (cdLineEl) {
440
+ cdLineEl.style.display = '';
389
441
  }
390
- reactData.dragTipText = tipContent;
391
442
  };
392
443
  const Methods = {
393
444
  callSlot(slotFunc, params, h, vNodes) {
@@ -556,6 +607,7 @@ const Methods = {
556
607
  editStore.removeMaps = {};
557
608
  const sYLoad = this.updateScrollYStatus(fullData);
558
609
  this.scrollYLoad = sYLoad;
610
+ this.isDragRowMove = false;
559
611
  // 全量数据
560
612
  this.tableFullData = fullData;
561
613
  this.tableFullTreeData = treeData;
@@ -739,6 +791,7 @@ const Methods = {
739
791
  const tableFullColumn = getColumnList(collectColumn);
740
792
  this.tableFullColumn = tableFullColumn;
741
793
  this._isLoading = true;
794
+ this.isDragColMove = false;
742
795
  this.initColumnSort();
743
796
  return Promise.resolve(this.restoreCustomStorage()).then(() => {
744
797
  this._isLoading = false;
@@ -3012,7 +3065,14 @@ const Methods = {
3012
3065
  if (isClear ||
3013
3066
  // 如果点击了当前表格之外
3014
3067
  !getEventTargetNode(evnt, $el).flag) {
3015
- setTimeout(() => this.clearEdit(evnt));
3068
+ setTimeout(() => {
3069
+ this.handleClearEdit(evnt).then(() => {
3070
+ // 如果存在校验,点击了表格之外则清除
3071
+ if (!this.isActivated && editRules && validOpts.autoClear) {
3072
+ this.validErrorMaps = {};
3073
+ }
3074
+ });
3075
+ });
3016
3076
  }
3017
3077
  });
3018
3078
  }
@@ -3076,8 +3136,8 @@ const Methods = {
3076
3136
  if (isEsc) {
3077
3137
  this.preventEvent(evnt, 'event.keydown', null, () => {
3078
3138
  this.emitEvent('keydown-start', {}, evnt);
3079
- if (keyboardConfig && mouseConfig && mouseOpts.area && this.handleKeyboardEvent) {
3080
- this.handleKeyboardEvent(evnt);
3139
+ if (keyboardConfig && mouseConfig && mouseOpts.area && this.handleKeyboardCellAreaEvent) {
3140
+ this.handleKeyboardCellAreaEvent(evnt);
3081
3141
  }
3082
3142
  else if (actived.row || filterStore.visible || ctxMenuStore.visible) {
3083
3143
  evnt.stopPropagation();
@@ -3088,7 +3148,7 @@ const Methods = {
3088
3148
  // 如果是激活编辑状态,则取消编辑
3089
3149
  if (actived.row) {
3090
3150
  const params = actived.args;
3091
- this.clearEdit(evnt);
3151
+ this.handleClearEdit(evnt);
3092
3152
  // 如果配置了选中功能,则为选中状态
3093
3153
  if (mouseConfig && mouseOpts.selected) {
3094
3154
  this.$nextTick(() => this.handleSelected(params, evnt));
@@ -3148,8 +3208,8 @@ const Methods = {
3148
3208
  this.moveCtxMenu(evnt, keyCode, ctxMenuStore, 'selected', 39, true, this.ctxMenuList);
3149
3209
  }
3150
3210
  }
3151
- else if (keyboardConfig && mouseConfig && mouseOpts.area && this.handleKeyboardEvent) {
3152
- this.handleKeyboardEvent(evnt);
3211
+ else if (keyboardConfig && mouseConfig && mouseOpts.area && this.handleKeyboardCellAreaEvent) {
3212
+ this.handleKeyboardCellAreaEvent(evnt);
3153
3213
  }
3154
3214
  else if (keyboardConfig && isSpacebar && keyboardOpts.isChecked && selected.row && selected.column && (selected.column.type === 'checkbox' || selected.column.type === 'radio')) {
3155
3215
  // 空格键支持选中复选框
@@ -3185,7 +3245,7 @@ const Methods = {
3185
3245
  // 如果是激活编辑状态,则取消编辑
3186
3246
  if (actived.row) {
3187
3247
  const params = actived.args;
3188
- this.clearEdit(evnt);
3248
+ this.handleClearEdit(evnt);
3189
3249
  // 如果配置了选中功能,则为选中状态
3190
3250
  if (mouseConfig && mouseOpts.selected) {
3191
3251
  this.$nextTick(() => this.handleSelected(params, evnt));
@@ -4701,6 +4761,9 @@ const Methods = {
4701
4761
  this.emitEvent('sort-change', params, evnt);
4702
4762
  }
4703
4763
  },
4764
+ /**
4765
+ * 行拖拽
4766
+ */
4704
4767
  handleRowDragDragstartEvent(evnt) {
4705
4768
  const img = new Image();
4706
4769
  if (evnt.dataTransfer) {
@@ -4712,26 +4775,29 @@ const Methods = {
4712
4775
  const props = $xeTable;
4713
4776
  const reactData = $xeTable;
4714
4777
  const internalData = $xeTable;
4715
- const { treeConfig } = props;
4716
- const dragOpts = $xeTable.computeDragOpts;
4717
- const { dragEndMethod } = dragOpts;
4778
+ const { treeConfig, dragConfig } = props;
4779
+ const rowDragOpts = $xeTable.computeRowDragOpts;
4780
+ const { dragEndMethod } = rowDragOpts;
4718
4781
  const treeOpts = $xeTable.computeTreeOpts;
4719
4782
  const { transform } = treeOpts;
4720
4783
  const { dragRow } = reactData;
4721
4784
  const { afterFullData, afterTreeFullData, tableFullData, tableFullTreeData, prevDragRow, prevDragPos } = internalData;
4785
+ const dEndMethod = dragEndMethod || (dragConfig ? dragConfig.dragEndMethod : null);
4786
+ const dragOffsetIndex = prevDragPos === 'bottom' ? 1 : 0;
4722
4787
  if (prevDragRow && dragRow) {
4723
4788
  // 判断是否有拖动
4724
4789
  if (prevDragRow !== dragRow) {
4725
- Promise.resolve(dragEndMethod
4726
- ? dragEndMethod({
4790
+ Promise.resolve(dEndMethod
4791
+ ? dEndMethod({
4727
4792
  oldRow: dragRow,
4728
- newRow: prevDragRow
4793
+ newRow: prevDragRow,
4794
+ dragPos: prevDragPos,
4795
+ offsetIndex: dragOffsetIndex
4729
4796
  })
4730
4797
  : true).then((status) => {
4731
4798
  if (!status) {
4732
4799
  return;
4733
4800
  }
4734
- const dragOffsetIndex = prevDragPos === 'bottom' ? 1 : 0;
4735
4801
  let oafIndex = -1;
4736
4802
  let nafIndex = -1;
4737
4803
  if (treeConfig) {
@@ -4769,18 +4835,19 @@ const Methods = {
4769
4835
  if (!(treeConfig && transform)) {
4770
4836
  $xeTable.updateAfterDataIndex();
4771
4837
  }
4772
- $xeTable.updateFooter();
4773
4838
  $xeTable.checkSelectionStatus();
4774
4839
  if (reactData.scrollYLoad) {
4775
4840
  $xeTable.updateScrollYSpace();
4776
4841
  }
4777
4842
  $xeTable.$nextTick().then(() => {
4778
4843
  $xeTable.updateCellAreas();
4779
- return $xeTable.recalculate();
4844
+ $xeTable.recalculate();
4780
4845
  });
4781
4846
  $xeTable.dispatchEvent('row-dragend', {
4782
4847
  oldRow: dragRow,
4783
4848
  newRow: prevDragRow,
4849
+ dragPos: prevDragPos,
4850
+ offsetIndex: dragOffsetIndex,
4784
4851
  _index: {
4785
4852
  newIndex: nafIndex,
4786
4853
  oldIndex: oafIndex
@@ -4790,10 +4857,10 @@ const Methods = {
4790
4857
  });
4791
4858
  }
4792
4859
  }
4793
- hideRowDropTip($xeTable);
4860
+ hideDropTip($xeTable);
4794
4861
  clearRowDropOrigin($xeTable);
4795
- clearRowDropTarget($xeTable);
4796
4862
  reactData.dragRow = null;
4863
+ reactData.dragCol = null;
4797
4864
  setTimeout(() => {
4798
4865
  reactData.isDragRowMove = false;
4799
4866
  }, 500);
@@ -4802,50 +4869,57 @@ const Methods = {
4802
4869
  const $xeTable = this;
4803
4870
  const internalData = $xeTable;
4804
4871
  const reactData = $xeTable;
4872
+ const { dragRow } = reactData;
4873
+ if (!dragRow) {
4874
+ evnt.preventDefault();
4875
+ return;
4876
+ }
4805
4877
  const trEl = evnt.currentTarget;
4806
4878
  const rowid = trEl.getAttribute('rowid');
4807
4879
  const row = $xeTable.getRowById(rowid);
4808
- clearRowDropTarget($xeTable);
4809
4880
  if (row) {
4810
4881
  evnt.preventDefault();
4811
4882
  evnt.preventDefault();
4812
4883
  const { dragRow } = reactData;
4813
4884
  const offsetY = evnt.clientY - trEl.getBoundingClientRect().y;
4814
4885
  const dragPos = offsetY < trEl.clientHeight / 2 ? 'top' : 'bottom';
4815
- updateRowDropTarget($xeTable, row, dragPos);
4816
4886
  internalData.prevDragRow = row;
4817
4887
  internalData.prevDragPos = dragPos;
4888
+ showDropTip($xeTable, evnt, trEl, null, dragPos);
4818
4889
  $xeTable.dispatchEvent('row-dragover', {
4819
4890
  oldRow: dragRow,
4820
4891
  targetRow: row,
4821
4892
  dragPos
4822
4893
  }, evnt);
4823
4894
  }
4824
- showRowDropTip(evnt, $xeTable);
4825
4895
  },
4826
4896
  handleCellDragMousedownEvent(evnt, params) {
4827
4897
  var _a;
4828
4898
  const $xeTable = this;
4899
+ const props = $xeTable;
4829
4900
  const reactData = $xeTable;
4830
4901
  evnt.stopPropagation();
4831
- const dragOpts = $xeTable.computeDragOpts;
4832
- const { dragStartMethod } = dragOpts;
4902
+ const { dragConfig } = props;
4903
+ const rowDragOpts = $xeTable.computeRowDragOpts;
4904
+ const { dragStartMethod } = rowDragOpts;
4833
4905
  const { row } = params;
4834
4906
  const dragEl = evnt.currentTarget;
4835
- const tdEl = (_a = dragEl.parentNode) === null || _a === void 0 ? void 0 : _a.parentNode;
4836
- const trEl = tdEl.parentNode;
4907
+ const tdEl = (_a = dragEl.parentElement) === null || _a === void 0 ? void 0 : _a.parentElement;
4908
+ const trEl = tdEl.parentElement;
4909
+ const dStartMethod = dragStartMethod || (dragConfig ? dragConfig.dragStartMethod : null);
4837
4910
  reactData.isDragRowMove = false;
4838
4911
  clearRowDropOrigin($xeTable);
4839
- if (dragStartMethod && !dragStartMethod(params)) {
4912
+ if (dStartMethod && !dStartMethod(params)) {
4840
4913
  trEl.draggable = false;
4841
4914
  reactData.dragRow = null;
4842
- hideRowDropTip($xeTable);
4915
+ reactData.dragCol = null;
4916
+ hideDropTip($xeTable);
4843
4917
  return;
4844
4918
  }
4845
4919
  reactData.dragRow = row;
4920
+ reactData.dragCol = null;
4846
4921
  trEl.draggable = true;
4847
4922
  updateRowDropOrigin($xeTable, row);
4848
- showRowDropTip(evnt, $xeTable);
4849
4923
  updateRowDropTipContent($xeTable, tdEl);
4850
4924
  $xeTable.dispatchEvent('row-dragstart', params, evnt);
4851
4925
  },
@@ -4853,10 +4927,162 @@ const Methods = {
4853
4927
  const $xeTable = this;
4854
4928
  const reactData = $xeTable;
4855
4929
  clearRowDropOrigin($xeTable);
4856
- hideRowDropTip($xeTable);
4930
+ hideDropTip($xeTable);
4857
4931
  reactData.dragRow = null;
4932
+ reactData.dragCol = null;
4858
4933
  reactData.isDragRowMove = false;
4859
4934
  },
4935
+ /**
4936
+ * 列拖拽
4937
+ */
4938
+ handleHeaderCellDragDragstartEvent(evnt) {
4939
+ const img = new Image();
4940
+ if (evnt.dataTransfer) {
4941
+ evnt.dataTransfer.setDragImage(img, 0, 0);
4942
+ }
4943
+ },
4944
+ handleHeaderCellDragDragendEvent(evnt) {
4945
+ const $xeTable = this;
4946
+ const props = $xeTable;
4947
+ const reactData = $xeTable;
4948
+ const internalData = $xeTable;
4949
+ const { mouseConfig } = props;
4950
+ const columnDragOpts = $xeTable.computeColumnDragOpts;
4951
+ const { dragEndMethod } = columnDragOpts;
4952
+ const { dragCol } = reactData;
4953
+ const { collectColumn, prevDragCol, prevDragPos } = internalData;
4954
+ const dragOffsetIndex = prevDragPos === 'right' ? 1 : 0;
4955
+ if (prevDragCol && dragCol) {
4956
+ // 判断是否有拖动
4957
+ if (prevDragCol !== dragCol) {
4958
+ Promise.resolve(dragEndMethod
4959
+ ? dragEndMethod({
4960
+ oldColumn: dragCol,
4961
+ newColumn: prevDragCol,
4962
+ dragPos: prevDragPos,
4963
+ offsetIndex: dragOffsetIndex
4964
+ })
4965
+ : true).then((status) => {
4966
+ if (!status) {
4967
+ return;
4968
+ }
4969
+ XEUtils.eachTree(collectColumn, (column, index, items, path, parent) => {
4970
+ if (!parent) {
4971
+ const sortIndex = index + 1;
4972
+ column.renderSortNumber = sortIndex;
4973
+ }
4974
+ });
4975
+ const oafIndex = XEUtils.findIndexOf(collectColumn, item => item.id === dragCol.id);
4976
+ const nafIndex = XEUtils.findIndexOf(collectColumn, item => item.id === prevDragCol.id) + dragOffsetIndex;
4977
+ const newTargetCol = collectColumn[nafIndex];
4978
+ if (newTargetCol) {
4979
+ // 插入最后位置
4980
+ dragCol.renderSortNumber = newTargetCol.renderSortNumber;
4981
+ newTargetCol.renderSortNumber = dragCol.renderSortNumber + 0.5;
4982
+ }
4983
+ else {
4984
+ // 插入新位置
4985
+ dragCol.renderSortNumber = collectColumn.length + 1.5;
4986
+ }
4987
+ reactData.isDragColMove = true;
4988
+ if (mouseConfig) {
4989
+ if ($xeTable.clearSelected) {
4990
+ $xeTable.clearSelected();
4991
+ }
4992
+ if ($xeTable.clearCellAreas) {
4993
+ $xeTable.clearCellAreas();
4994
+ $xeTable.clearCopyCellArea();
4995
+ }
4996
+ }
4997
+ $xeTable.analyColumnWidth();
4998
+ $xeTable.$nextTick().then(() => {
4999
+ $xeTable.updateCellAreas();
5000
+ $xeTable.refreshColumn(true);
5001
+ });
5002
+ $xeTable.dispatchEvent('column-dragend', {
5003
+ oldColumn: dragCol,
5004
+ newColumn: prevDragCol,
5005
+ dragPos: prevDragPos,
5006
+ offsetIndex: dragOffsetIndex,
5007
+ _index: {
5008
+ newIndex: nafIndex,
5009
+ oldIndex: oafIndex
5010
+ }
5011
+ }, evnt);
5012
+ }).catch(() => {
5013
+ });
5014
+ }
5015
+ }
5016
+ hideDropTip($xeTable);
5017
+ clearColDropOrigin($xeTable);
5018
+ reactData.dragRow = null;
5019
+ reactData.dragCol = null;
5020
+ setTimeout(() => {
5021
+ reactData.isDragColMove = false;
5022
+ }, 500);
5023
+ },
5024
+ handleHeaderCellDragDragoverEvent(evnt) {
5025
+ const $xeTable = this;
5026
+ const reactData = $xeTable;
5027
+ const internalData = $xeTable;
5028
+ const { dragCol } = reactData;
5029
+ if (!dragCol) {
5030
+ evnt.preventDefault();
5031
+ return;
5032
+ }
5033
+ const thEl = evnt.currentTarget;
5034
+ const colid = thEl.getAttribute('colid');
5035
+ const column = $xeTable.getColumnById(colid);
5036
+ if (column) {
5037
+ evnt.preventDefault();
5038
+ const { dragCol } = reactData;
5039
+ const offsetX = evnt.clientX - thEl.getBoundingClientRect().x;
5040
+ const dragPos = offsetX < thEl.clientWidth / 2 ? 'left' : 'right';
5041
+ internalData.prevDragCol = column;
5042
+ internalData.prevDragPos = dragPos;
5043
+ showDropTip($xeTable, evnt, null, thEl, dragPos);
5044
+ $xeTable.dispatchEvent('column-dragover', {
5045
+ oldColumn: dragCol,
5046
+ targetColumn: column,
5047
+ dragPos
5048
+ }, evnt);
5049
+ }
5050
+ },
5051
+ handleHeaderCellDragMousedownEvent(evnt, params) {
5052
+ var _a;
5053
+ const $xeTable = this;
5054
+ const reactData = $xeTable;
5055
+ evnt.stopPropagation();
5056
+ const columnDragOpts = $xeTable.computeColumnDragOpts;
5057
+ const { dragStartMethod } = columnDragOpts;
5058
+ const { column } = params;
5059
+ const dragEl = evnt.currentTarget;
5060
+ const thEl = (_a = dragEl.parentElement) === null || _a === void 0 ? void 0 : _a.parentElement;
5061
+ reactData.isDragColMove = false;
5062
+ clearColDropOrigin($xeTable);
5063
+ if (dragStartMethod && !dragStartMethod(params)) {
5064
+ thEl.draggable = false;
5065
+ reactData.dragRow = null;
5066
+ reactData.dragCol = null;
5067
+ hideDropTip($xeTable);
5068
+ return;
5069
+ }
5070
+ reactData.dragCol = column;
5071
+ reactData.dragRow = null;
5072
+ thEl.draggable = true;
5073
+ updateColDropOrigin($xeTable, column);
5074
+ updateColDropTipContent($xeTable, thEl);
5075
+ $xeTable.dispatchEvent('column-dragstart', params, evnt);
5076
+ },
5077
+ handleHeaderCellDragMouseupEvent() {
5078
+ const $xeTable = this;
5079
+ const reactData = $xeTable;
5080
+ clearColDropOrigin($xeTable);
5081
+ hideDropTip($xeTable);
5082
+ reactData.dragRow = null;
5083
+ reactData.dragCol = null;
5084
+ reactData.isDragColMove = false;
5085
+ },
4860
5086
  setPendingRow(rows, status) {
4861
5087
  const pendingMaps = Object.assign({}, this.pendingRowMaps);
4862
5088
  const pendingList = [...this.pendingRowList];
@@ -6334,8 +6560,8 @@ const Methods = {
6334
6560
  }
6335
6561
  },
6336
6562
  updateCellAreas() {
6337
- if (this.mouseConfig && this.mouseOpts.area && this.handleUpdateCellAreas) {
6338
- return this.handleUpdateCellAreas();
6563
+ if (this.mouseConfig && this.mouseOpts.area && this.handleRecalculateCellAreas) {
6564
+ return this.handleRecalculateCellAreas();
6339
6565
  }
6340
6566
  return this.$nextTick();
6341
6567
  },
@@ -6396,7 +6622,7 @@ const Methods = {
6396
6622
  }
6397
6623
  };
6398
6624
  // Module methods
6399
- const funcs = 'setFilter,openFilter,clearFilter,getCheckedFilters,updateFilterOptionStatus,closeMenu,setActiveCellArea,getActiveCellArea,getCellAreas,clearCellAreas,copyCellArea,cutCellArea,pasteCellArea,getCopyCellArea,getCopyCellAreas,clearCopyCellArea,setCellAreas,openFNR,openFind,openReplace,closeFNR,getSelectedCell,clearSelected,insert,insertAt,insertNextAt,remove,removeCheckboxRow,removeRadioRow,removeCurrentRow,getRecordset,getInsertRecords,getRemoveRecords,getUpdateRecords,clearEdit,clearActived,getEditRecord,getActiveRecord,isEditByRow,isActiveByRow,setEditRow,setActiveRow,setEditCell,setActiveCell,setSelectCell,clearValidate,fullValidate,validate,openExport,closeExport,openPrint,closePrint,getPrintHtml,exportData,openImport,closeImport,importData,saveFile,readFile,importByFile,print,openCustom,closeCustom,saveCustom,cancelCustom,resetCustom,toggleCustomAllCheckbox,setCustomAllCheckbox'.split(',');
6625
+ const funcs = 'setFilter,openFilter,clearFilter,getCheckedFilters,updateFilterOptionStatus,closeMenu,setActiveCellArea,getActiveCellArea,getCellAreas,clearCellAreas,copyCellArea,cutCellArea,pasteCellArea,getCopyCellArea,getCopyCellAreas,clearCopyCellArea,setCellAreas,openFNR,openFind,openReplace,closeFNR,getSelectedCell,clearSelected,insert,insertAt,insertNextAt,remove,removeCheckboxRow,removeRadioRow,removeCurrentRow,getRecordset,getInsertRecords,getRemoveRecords,getUpdateRecords,clearEdit,clearActived,getEditRecord,getActiveRecord,isEditByRow,isActiveByRow,setEditRow,setActiveRow,setEditCell,setActiveCell,setSelectCell,clearValidate,fullValidate,validate,fullValidateField,validateField,openExport,closeExport,openPrint,closePrint,getPrintHtml,exportData,openImport,closeImport,importData,saveFile,readFile,importByFile,print,openCustom,closeCustom,saveCustom,cancelCustom,resetCustom,toggleCustomAllCheckbox,setCustomAllCheckbox'.split(',');
6400
6626
  funcs.forEach(name => {
6401
6627
  Methods[name] = function (...args) {
6402
6628
  if (process.env.NODE_ENV === 'development') {
@@ -159,8 +159,12 @@ export default {
159
159
  cellConfig: Object,
160
160
  // 行配置信息
161
161
  rowConfig: Object,
162
- // 可拖拽配置项
162
+ // 已废弃,被 rowDragConfig 替换
163
163
  dragConfig: Object,
164
+ // 行拖拽排序配置项
165
+ rowDragConfig: Object,
166
+ // 列拖拽排序配置项
167
+ columnDragConfig: Object,
164
168
  // 列调整配置项
165
169
  resizableConfig: Object,
166
170
  // 序号配置项