vxe-table 3.16.0-beta.1 → 3.16.0-beta.2
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/grid/src/grid.js +17 -5
- package/es/index.css +1 -1
- package/es/index.min.css +1 -1
- package/es/style.css +1 -1
- package/es/style.min.css +1 -1
- package/es/table/module/custom/mixin.js +0 -4
- package/es/table/module/custom/panel.js +0 -1
- package/es/table/src/anime.js +46 -0
- package/es/table/src/body.js +15 -40
- package/es/table/src/columnInfo.js +5 -0
- package/es/table/src/footer.js +1 -19
- package/es/table/src/header.js +1 -19
- package/es/table/src/methods.js +532 -346
- package/es/table/src/table.js +21 -2
- package/es/table/style.css +8 -8
- package/es/table/style.min.css +1 -1
- package/es/ui/index.js +2 -1
- package/es/ui/src/log.js +1 -1
- package/es/vxe-table/style.css +8 -8
- package/es/vxe-table/style.min.css +1 -1
- package/lib/grid/src/grid.js +22 -7
- package/lib/grid/src/grid.min.js +1 -1
- package/lib/index.css +1 -1
- package/lib/index.min.css +1 -1
- package/lib/index.umd.js +642 -436
- package/lib/index.umd.min.js +1 -1
- package/lib/style.css +1 -1
- package/lib/style.min.css +1 -1
- package/lib/table/module/custom/mixin.js +0 -4
- package/lib/table/module/custom/mixin.min.js +1 -1
- package/lib/table/module/custom/panel.js +0 -1
- package/lib/table/module/custom/panel.min.js +1 -1
- package/lib/table/src/anime.js +56 -0
- package/lib/table/src/anime.min.js +1 -0
- package/lib/table/src/body.js +3 -28
- package/lib/table/src/body.min.js +1 -1
- package/lib/table/src/columnInfo.js +5 -0
- package/lib/table/src/columnInfo.min.js +1 -1
- package/lib/table/src/footer.js +1 -19
- package/lib/table/src/footer.min.js +1 -1
- package/lib/table/src/header.js +1 -19
- package/lib/table/src/header.min.js +1 -1
- package/lib/table/src/methods.js +539 -355
- package/lib/table/src/methods.min.js +1 -1
- package/lib/table/src/table.js +21 -1
- package/lib/table/src/table.min.js +1 -1
- package/lib/table/style/style.css +8 -8
- package/lib/table/style/style.min.css +1 -1
- package/lib/ui/index.js +2 -1
- package/lib/ui/index.min.js +1 -1
- package/lib/ui/src/log.js +1 -1
- package/lib/ui/src/log.min.js +1 -1
- package/lib/vxe-table/style/style.css +8 -8
- package/lib/vxe-table/style/style.min.css +1 -1
- package/package.json +1 -1
- package/packages/grid/src/grid.ts +19 -6
- package/packages/table/module/custom/mixin.ts +0 -4
- package/packages/table/module/custom/panel.ts +0 -1
- package/packages/table/src/anime.ts +52 -0
- package/packages/table/src/body.ts +15 -40
- package/packages/table/src/columnInfo.ts +5 -0
- package/packages/table/src/footer.ts +1 -19
- package/packages/table/src/header.ts +1 -20
- package/packages/table/src/methods.ts +554 -360
- package/packages/table/src/table.ts +21 -2
- package/packages/ui/index.ts +1 -0
- package/styles/components/table.scss +9 -9
- /package/es/{iconfont.1750910486943.ttf → iconfont.1751194972120.ttf} +0 -0
- /package/es/{iconfont.1750910486943.woff → iconfont.1751194972120.woff} +0 -0
- /package/es/{iconfont.1750910486943.woff2 → iconfont.1751194972120.woff2} +0 -0
- /package/lib/{iconfont.1750910486943.ttf → iconfont.1751194972120.ttf} +0 -0
- /package/lib/{iconfont.1750910486943.woff → iconfont.1751194972120.woff} +0 -0
- /package/lib/{iconfont.1750910486943.woff2 → iconfont.1751194972120.woff2} +0 -0
|
@@ -0,0 +1,46 @@
|
|
|
1
|
+
import XEUtils from 'xe-utils';
|
|
2
|
+
import { addClass, removeClass } from '../../ui/src/dom';
|
|
3
|
+
const rowMoveCls = 'row--drag-move';
|
|
4
|
+
const colMoveClass = 'col--drag-move';
|
|
5
|
+
/**
|
|
6
|
+
* 上下拖拽
|
|
7
|
+
*/
|
|
8
|
+
export function moveRowAnimateToTb(elemList, offsetTop) {
|
|
9
|
+
XEUtils.arrayEach(elemList, trEl => {
|
|
10
|
+
trEl.style.transform = `translateY(${offsetTop}px)`;
|
|
11
|
+
});
|
|
12
|
+
requestAnimationFrame(() => {
|
|
13
|
+
XEUtils.arrayEach(elemList, trEl => {
|
|
14
|
+
addClass(trEl, rowMoveCls);
|
|
15
|
+
trEl.style.transform = '';
|
|
16
|
+
});
|
|
17
|
+
});
|
|
18
|
+
}
|
|
19
|
+
export function clearRowAnimate(elem) {
|
|
20
|
+
setTimeout(() => {
|
|
21
|
+
if (elem) {
|
|
22
|
+
XEUtils.arrayEach(elem.querySelectorAll(`.vxe-body--row.${rowMoveCls}`), elem => removeClass(elem, rowMoveCls));
|
|
23
|
+
}
|
|
24
|
+
}, 500);
|
|
25
|
+
}
|
|
26
|
+
/**
|
|
27
|
+
* 左右拖拽
|
|
28
|
+
*/
|
|
29
|
+
export function moveColAnimateToLr(elemList, offsetLeft) {
|
|
30
|
+
XEUtils.arrayEach(elemList, trEl => {
|
|
31
|
+
trEl.style.transform = `translateX(${offsetLeft}px)`;
|
|
32
|
+
});
|
|
33
|
+
requestAnimationFrame(() => {
|
|
34
|
+
XEUtils.arrayEach(elemList, trEl => {
|
|
35
|
+
addClass(trEl, colMoveClass);
|
|
36
|
+
trEl.style.transform = '';
|
|
37
|
+
});
|
|
38
|
+
});
|
|
39
|
+
}
|
|
40
|
+
export function clearColAnimate(elem) {
|
|
41
|
+
setTimeout(() => {
|
|
42
|
+
if (elem) {
|
|
43
|
+
XEUtils.arrayEach(elem.querySelectorAll(`.vxe-table--column.${colMoveClass}`), elem => removeClass(elem, colMoveClass));
|
|
44
|
+
}
|
|
45
|
+
}, 500);
|
|
46
|
+
}
|
package/es/table/src/body.js
CHANGED
|
@@ -379,7 +379,7 @@ function renderTdColumn(h, $xeTable, seq, rowid, fixedType, isOptimizeMode, rowL
|
|
|
379
379
|
}
|
|
380
380
|
return h('td', {
|
|
381
381
|
class: [
|
|
382
|
-
'vxe-body--column',
|
|
382
|
+
'vxe-table--column vxe-body--column',
|
|
383
383
|
colid,
|
|
384
384
|
cellVerticalAlign ? `col--vertical-${cellVerticalAlign}` : '',
|
|
385
385
|
cellAlign ? `col--${cellAlign}` : '',
|
|
@@ -421,7 +421,7 @@ function renderRows(h, _vm, fixedType, isOptimizeMode, tableData, tableColumn) {
|
|
|
421
421
|
const tableInternalData = $xeTable;
|
|
422
422
|
const $xeGrid = $xeTable.$xeGrid;
|
|
423
423
|
const { stripe, rowKey, highlightHoverRow, rowClassName, rowStyle, editConfig, treeConfig } = tableProps;
|
|
424
|
-
const { hasFixedColumn, treeExpandedFlag,
|
|
424
|
+
const { hasFixedColumn, treeExpandedFlag, scrollXLoad, scrollYLoad, isAllOverflow, rowExpandedFlag, expandColumn, selectRadioRow, pendingRowFlag, rowExpandHeightFlag, isRowGroupStatus } = tableReactData;
|
|
425
425
|
const { fullAllDataRowIdData, fullColumnIdData, treeExpandedMaps, pendingRowMaps, rowExpandedMaps } = tableInternalData;
|
|
426
426
|
const checkboxOpts = $xeTable.computeCheckboxOpts;
|
|
427
427
|
const radioOpts = $xeTable.computeRadioOpts;
|
|
@@ -429,7 +429,6 @@ function renderRows(h, _vm, fixedType, isOptimizeMode, tableData, tableColumn) {
|
|
|
429
429
|
const editOpts = $xeTable.computeEditOpts;
|
|
430
430
|
const rowOpts = $xeTable.computeRowOpts;
|
|
431
431
|
const columnOpts = $xeTable.computeColumnOpts;
|
|
432
|
-
const columnDragOpts = $xeTable.computeColumnDragOpts;
|
|
433
432
|
const { transform, seqMode } = treeOpts;
|
|
434
433
|
const childrenField = treeOpts.children || treeOpts.childrenField;
|
|
435
434
|
const rows = [];
|
|
@@ -510,29 +509,15 @@ function renderRows(h, _vm, fixedType, isOptimizeMode, tableData, tableColumn) {
|
|
|
510
509
|
const tdVNs = tableColumn.map((column, $columnIndex) => {
|
|
511
510
|
return renderTdColumn(h, $xeTable, seq, rowid, fixedType, isOptimizeMode, rowLevel, row, rowIndex, $rowIndex, _rowIndex, column, $columnIndex, tableColumn, tableData);
|
|
512
511
|
});
|
|
513
|
-
rows.push(
|
|
514
|
-
|
|
515
|
-
|
|
516
|
-
|
|
517
|
-
|
|
518
|
-
|
|
519
|
-
|
|
520
|
-
|
|
521
|
-
|
|
522
|
-
},
|
|
523
|
-
style: rowStyle ? (XEUtils.isFunction(rowStyle) ? rowStyle(params) : rowStyle) : undefined,
|
|
524
|
-
key: rowKey || scrollXLoad || scrollYLoad || rowOpts.useKey || rowOpts.drag || columnOpts.drag || isRowGroupStatus || treeConfig ? rowid : $rowIndex,
|
|
525
|
-
nativeOn: trOn
|
|
526
|
-
}, tdVNs)
|
|
527
|
-
: h('tr', {
|
|
528
|
-
class: trClass,
|
|
529
|
-
attrs: {
|
|
530
|
-
rowid
|
|
531
|
-
},
|
|
532
|
-
style: rowStyle ? (XEUtils.isFunction(rowStyle) ? rowStyle(params) : rowStyle) : undefined,
|
|
533
|
-
key: rowKey || scrollXLoad || scrollYLoad || rowOpts.useKey || rowOpts.drag || columnOpts.drag || isRowGroupStatus || treeConfig ? rowid : $rowIndex,
|
|
534
|
-
on: trOn
|
|
535
|
-
}, tdVNs));
|
|
512
|
+
rows.push(h('tr', {
|
|
513
|
+
class: trClass,
|
|
514
|
+
attrs: {
|
|
515
|
+
rowid
|
|
516
|
+
},
|
|
517
|
+
style: rowStyle ? (XEUtils.isFunction(rowStyle) ? rowStyle(params) : rowStyle) : undefined,
|
|
518
|
+
key: rowKey || scrollXLoad || scrollYLoad || rowOpts.useKey || rowOpts.drag || columnOpts.drag || isRowGroupStatus || treeConfig ? rowid : $rowIndex,
|
|
519
|
+
on: trOn
|
|
520
|
+
}, tdVNs));
|
|
536
521
|
// 如果行被展开了
|
|
537
522
|
if (isExpandRow) {
|
|
538
523
|
const expandOpts = $xeTable.computeExpandOpts;
|
|
@@ -687,12 +672,10 @@ export default {
|
|
|
687
672
|
const { xID } = $xeTable;
|
|
688
673
|
const { fixedColumn, fixedType, tableColumn } = props;
|
|
689
674
|
const { spanMethod, footerSpanMethod, mouseConfig } = tableProps;
|
|
690
|
-
const { isGroup, tableData,
|
|
675
|
+
const { isGroup, tableData, isColLoading, overflowX, scrollXLoad, scrollYLoad, isAllOverflow, expandColumn, dragRow, dragCol } = tableReactData;
|
|
691
676
|
const { visibleColumn, fullAllDataRowIdData, fullColumnIdData } = tableInternalData;
|
|
692
|
-
const rowOpts = $xeTable.computeRowOpts;
|
|
693
677
|
const emptyOpts = $xeTable.computeEmptyOpts;
|
|
694
678
|
const mouseOpts = $xeTable.computeMouseOpts;
|
|
695
|
-
const rowDragOpts = $xeTable.computeRowDragOpts;
|
|
696
679
|
const expandOpts = $xeTable.computeExpandOpts;
|
|
697
680
|
let renderDataList = tableData;
|
|
698
681
|
let renderColumnList = tableColumn;
|
|
@@ -835,17 +818,9 @@ export default {
|
|
|
835
818
|
/**
|
|
836
819
|
* 内容
|
|
837
820
|
*/
|
|
838
|
-
|
|
839
|
-
|
|
840
|
-
|
|
841
|
-
props: {
|
|
842
|
-
tag: 'tbody',
|
|
843
|
-
name: `vxe-body--row-list${isDragRowMove ? '' : '-disabled'}`
|
|
844
|
-
}
|
|
845
|
-
}, renderRows(h, this, fixedType, isOptimizeMode, renderDataList, renderColumnList))
|
|
846
|
-
: h('tbody', {
|
|
847
|
-
ref: 'refBodyTBody'
|
|
848
|
-
}, renderRows(h, this, fixedType, isOptimizeMode, renderDataList, renderColumnList))
|
|
821
|
+
h('tbody', {
|
|
822
|
+
ref: 'refBodyTBody'
|
|
823
|
+
}, renderRows(h, this, fixedType, isOptimizeMode, renderDataList, renderColumnList))
|
|
849
824
|
]),
|
|
850
825
|
h('div', {
|
|
851
826
|
class: 'vxe-table--checkbox-range'
|
|
@@ -48,6 +48,11 @@ export class ColumnInfo {
|
|
|
48
48
|
}
|
|
49
49
|
}
|
|
50
50
|
}
|
|
51
|
+
if (_vm.aggFunc) {
|
|
52
|
+
if (!$xeTable.handlePivotTableAggregateData && _vm.aggFunc !== true) {
|
|
53
|
+
errLog('vxe.error.errProp', [`column.agg-func=${_vm.aggFunc}`, 'column.agg-func=true']);
|
|
54
|
+
}
|
|
55
|
+
}
|
|
51
56
|
Object.assign(this, {
|
|
52
57
|
// 基本属性
|
|
53
58
|
type: _vm.type,
|
package/es/table/src/footer.js
CHANGED
|
@@ -135,7 +135,7 @@ function renderRows(h, _vm, isOptimizeMode, tableColumn, footerTableData, row, $
|
|
|
135
135
|
tcStyle.minHeight = `${currCellHeight}px`;
|
|
136
136
|
}
|
|
137
137
|
return h('td', {
|
|
138
|
-
class: ['vxe-footer--column', column.id, {
|
|
138
|
+
class: ['vxe-table--column vxe-footer--column', column.id, {
|
|
139
139
|
[`col--${footAlign}`]: footAlign,
|
|
140
140
|
[`col--${type}`]: type,
|
|
141
141
|
'col--last': isLastColumn,
|
|
@@ -188,29 +188,11 @@ function renderHeads(h, _vm, isOptimizeMode, renderColumnList) {
|
|
|
188
188
|
const props = _vm;
|
|
189
189
|
const $xeTable = _vm.$parent;
|
|
190
190
|
const tableProps = $xeTable;
|
|
191
|
-
const tableReactData = $xeTable;
|
|
192
191
|
const { fixedType, footerTableData } = props;
|
|
193
192
|
const { footerRowClassName, footerRowStyle } = tableProps;
|
|
194
|
-
const { isColLoading, isDragColMove } = tableReactData;
|
|
195
|
-
const columnOpts = $xeTable.computeColumnOpts;
|
|
196
|
-
const columnDragOpts = $xeTable.computeColumnDragOpts;
|
|
197
193
|
return footerTableData.map((row, $rowIndex) => {
|
|
198
194
|
const _rowIndex = $rowIndex;
|
|
199
195
|
const rowParams = { $table: $xeTable, row, _rowIndex, $rowIndex, fixed: fixedType, type: renderType };
|
|
200
|
-
if (!isColLoading && columnOpts.drag && columnDragOpts.animation) {
|
|
201
|
-
return h('transition-group', {
|
|
202
|
-
key: $rowIndex,
|
|
203
|
-
props: {
|
|
204
|
-
tag: 'tr',
|
|
205
|
-
name: `vxe-header--col-list${isDragColMove ? '' : '-disabled'}`,
|
|
206
|
-
class: [
|
|
207
|
-
'vxe-footer--row',
|
|
208
|
-
footerRowClassName ? XEUtils.isFunction(footerRowClassName) ? footerRowClassName(rowParams) : footerRowClassName : ''
|
|
209
|
-
],
|
|
210
|
-
style: footerRowStyle ? (XEUtils.isFunction(footerRowStyle) ? footerRowStyle(rowParams) : footerRowStyle) : undefined
|
|
211
|
-
}
|
|
212
|
-
}, renderRows(h, _vm, isOptimizeMode, renderColumnList, footerTableData, row, $rowIndex, _rowIndex));
|
|
213
|
-
}
|
|
214
196
|
return h('tr', {
|
|
215
197
|
key: $rowIndex,
|
|
216
198
|
class: [
|
package/es/table/src/header.js
CHANGED
|
@@ -107,7 +107,7 @@ const renderRows = (h, _vm, isGroup, isOptimizeMode, cols, $rowIndex) => {
|
|
|
107
107
|
tcStyle.minHeight = `${currCellHeight}px`;
|
|
108
108
|
}
|
|
109
109
|
return h('th', {
|
|
110
|
-
class: ['vxe-header--column', colid, {
|
|
110
|
+
class: ['vxe-table--column vxe-header--column', colid, {
|
|
111
111
|
[`col--${headAlign}`]: headAlign,
|
|
112
112
|
[`col--${type}`]: type,
|
|
113
113
|
'col--last': isLastColumn,
|
|
@@ -165,28 +165,10 @@ function renderHeads(h, _vm, isGroup, isOptimizeMode, headerGroups) {
|
|
|
165
165
|
const props = _vm;
|
|
166
166
|
const $xeTable = _vm.$parent;
|
|
167
167
|
const tableProps = $xeTable;
|
|
168
|
-
const tableReactData = $xeTable;
|
|
169
168
|
const { fixedType } = props;
|
|
170
|
-
const columnOpts = $xeTable.computeColumnOpts;
|
|
171
|
-
const columnDragOpts = $xeTable.computeColumnDragOpts;
|
|
172
169
|
const { headerRowClassName, headerRowStyle } = tableProps;
|
|
173
|
-
const { isColLoading, isDragColMove } = tableReactData;
|
|
174
170
|
return headerGroups.map((cols, $rowIndex) => {
|
|
175
171
|
const params = { $table: $xeTable, $rowIndex, fixed: fixedType, type: cellType };
|
|
176
|
-
if (!isColLoading && columnOpts.drag && columnDragOpts.animation) {
|
|
177
|
-
return h('transition-group', {
|
|
178
|
-
key: $rowIndex,
|
|
179
|
-
props: {
|
|
180
|
-
tag: 'tr',
|
|
181
|
-
name: `vxe-header--col-list${isDragColMove ? '' : '-disabled'}`,
|
|
182
|
-
class: [
|
|
183
|
-
'vxe-header--row',
|
|
184
|
-
headerRowClassName ? XEUtils.isFunction(headerRowClassName) ? headerRowClassName(params) : headerRowClassName : ''
|
|
185
|
-
],
|
|
186
|
-
style: headerRowStyle ? (XEUtils.isFunction(headerRowStyle) ? headerRowStyle(params) : headerRowStyle) : null
|
|
187
|
-
}
|
|
188
|
-
}, renderRows(h, _vm, isGroup, isOptimizeMode, cols, $rowIndex));
|
|
189
|
-
}
|
|
190
172
|
return h('tr', {
|
|
191
173
|
key: $rowIndex,
|
|
192
174
|
class: [
|