vxe-table 4.4.6 → 4.5.0-beta.2

package/es/table/src/body.js

@@ -131,7 +131,7 @@ export default defineComponent({
         var renderColumn = function (seq, rowid, fixedType, rowLevel, row, rowIndex, $rowIndex, _rowIndex, column, $columnIndex, columns, items) {
             var _a;
             var columnKey = tableProps.columnKey, allColumnOverflow = tableProps.showOverflow, allCellClassName = tableProps.cellClassName, cellStyle = tableProps.cellStyle, allAlign = tableProps.align, spanMethod = tableProps.spanMethod, mouseConfig = tableProps.mouseConfig, editConfig = tableProps.editConfig, editRules = tableProps.editRules, tooltipConfig = tableProps.tooltipConfig;
-            var tableData = tableReactData.tableData, overflowX = tableReactData.overflowX, scrollYLoad = tableReactData.scrollYLoad, currentColumn = tableReactData.currentColumn, mergeList = tableReactData.mergeList, editStore = tableReactData.editStore, validStore = tableReactData.validStore, isAllOverflow = tableReactData.isAllOverflow;
+            var tableData = tableReactData.tableData, overflowX = tableReactData.overflowX, scrollYLoad = tableReactData.scrollYLoad, currentColumn = tableReactData.currentColumn, mergeList = tableReactData.mergeList, editStore = tableReactData.editStore, isAllOverflow = tableReactData.isAllOverflow, validErrorMaps = tableReactData.validErrorMaps;
             var afterFullData = tableInternalData.afterFullData;
             var validOpts = computeValidOpts.value;
             var checkboxOpts = computeCheckboxOpts.value;
@@ -161,7 +161,7 @@ export default defineComponent({
             var isDirty;
             var tdOns = {};
             var cellAlign = align || allAlign;
-            var hasValidError = validStore.row === row && validStore.column === column;
+            var errorValidItem = validErrorMaps["".concat(rowid, ":").concat(column.id)];
             var showValidTip = editRules && validOpts.showMessage;
             var attrs = { colid: column.id };
             var params = { $table: $xetable, $grid: $xetable.xegrid, seq: seq, rowid: rowid, row: row, rowIndex: rowIndex, $rowIndex: $rowIndex, _rowIndex: _rowIndex, column: column, columnIndex: columnIndex, $columnIndex: $columnIndex, _columnIndex: _columnIndex, fixed: fixedType, type: renderType, isHidden: fixedHiddenColumn, level: rowLevel, visibleData: afterFullData, data: tableData, items: items };
@@ -276,16 +276,16 @@ export default defineComponent({
                         },
                         title: showTitle ? $xetable.getCellLabel(row, column) : null
                     }, column.renderCell(params))], false));
-                if (showValidTip && hasValidError) {
+                if (showValidTip && errorValidItem) {
                     tdVNs.push(h('div', {
                         class: 'vxe-cell--valid',
-                        style: validStore.rule && validStore.rule.maxWidth ? {
-                            width: "".concat(validStore.rule.maxWidth, "px")
+                        style: errorValidItem.rule && errorValidItem.rule.maxWidth ? {
+                            width: "".concat(errorValidItem.rule.maxWidth, "px")
                         } : null
                     }, [
                         h('span', {
                             class: 'vxe-cell--valid-msg'
-                        }, validStore.content)
+                        }, errorValidItem.content)
                     ]));
                 }
             }
@@ -302,7 +302,7 @@ export default defineComponent({
                         _a['fixed--hidden'] = fixedHiddenColumn,
                         _a['col--dirty'] = isDirty,
                         _a['col--actived'] = editConfig && isEdit && (actived.row === row && (actived.column === column || editOpts.mode === 'row')),
-                        _a['col--valid-error'] = hasValidError,
+                        _a['col--valid-error'] = !!errorValidItem,
                         _a['col--current'] = currentColumn === column,
                         _a),
                     getPropClass(compCellClassName, params),

package/es/table/src/columnInfo.js

@@ -102,11 +102,18 @@ var ColumnInfo = /** @class */ (function () {
             checked: false,
             halfChecked: false,
             disabled: false,
+            // 分组层级
             level: 1,
+            // 跨行
             rowSpan: 1,
+            // 跨列
             colSpan: 1,
+            // 数据排序-自定义排序
             order: null,
+            // 数据排序-用于多列的先后顺序
             sortTime: 0,
+            // 列排序
+            customOrder: 0,
             renderWidth: 0,
             renderHeight: 0,
             resizeWidth: 0,

package/es/table/src/table.js

@@ -35,7 +35,7 @@ import TableFooterComponent from '../../footer';
 import tableProps from './props';
 import tableEmits from './emits';
 import VxeLoading from '../../loading/index';
-import { getRowUniqueId, clearTableAllStatus, getRowkey, getRowid, rowToVisible, colToVisible, getCellValue, setCellValue, handleFieldOrColumn, toTreePathSeq, restoreScrollLocation, restoreScrollListener } from './util';
+import { getRowUniqueId, clearTableAllStatus, getRowkey, getRowid, rowToVisible, colToVisible, getCellValue, setCellValue, handleFieldOrColumn, toTreePathSeq, restoreScrollLocation, restoreScrollListener, getRootColumn } from './util';
 import { getSlotVNs } from '../../tools/vn';
 var isWebkit = browse['-webkit'] && !browse.edge;
 var resizableStorageKey = 'VXE_TABLE_CUSTOM_COLUMN_WIDTH';
@@ -194,13 +194,9 @@ export default defineComponent({
             },
             // 存放数据校验相关信息
             validStore: {
-                visible: false,
-                row: null,
-                column: null,
-                content: '',
-                rule: null,
-                isArrow: false
+                visible: false
             },
+            validErrorMaps: {},
             // 导入相关信息
             importStore: {
                 inited: false,
@@ -304,6 +300,7 @@ export default defineComponent({
             // 总的缓存数据集
             fullAllDataRowIdData: {},
             // 渲染中缓存数据
+            sourceDataRowIdData: {},
             fullDataRowIdData: {},
             fullColumnIdData: {},
             fullColumnFieldData: {},
@@ -467,6 +464,25 @@ export default defineComponent({
         var computeCustomOpts = computed(function () {
             return Object.assign({}, GlobalConfig.table.customConfig, props.customConfig);
         });
+        var computeFixedColumnSize = computed(function () {
+            var tableFullColumn = internalData.tableFullColumn;
+            var fixedSize = 0;
+            tableFullColumn.forEach(function (column) {
+                if (column.fixed) {
+                    fixedSize++;
+                }
+            });
+            return fixedSize;
+        });
+        var computeIsMaxFixedColumn = computed(function () {
+            var fixedColumnSize = computeFixedColumnSize.value;
+            var columnOpts = computeColumnOpts.value;
+            var maxFixedSize = columnOpts.maxFixedSize;
+            if (maxFixedSize) {
+                return fixedColumnSize >= maxFixedSize;
+            }
+            return false;
+        });
         var computeTableBorder = computed(function () {
             var border = props.border;
             if (border === true) {
@@ -550,6 +566,8 @@ export default defineComponent({
             computeEmptyOpts: computeEmptyOpts,
             computeLoadingOpts: computeLoadingOpts,
             computeCustomOpts: computeCustomOpts,
+            computeFixedColumnSize: computeFixedColumnSize,
+            computeIsMaxFixedColumn: computeIsMaxFixedColumn,
             computeIsAllCheckboxDisabled: computeIsAllCheckboxDisabled
         };
         var $xetable = {
@@ -798,8 +816,8 @@ export default defineComponent({
                 if (isCustomResizable) {
                     var columnWidthStorage = getCustomStorageMap(resizableStorageKey)[id];
                     if (columnWidthStorage) {
-                        XEUtils.each(columnWidthStorage, function (resizeWidth, field) {
-                            customMap_1[field] = { field: field, resizeWidth: resizeWidth };
+                        XEUtils.each(columnWidthStorage, function (resizeWidth, colKey) {
+                            customMap_1[colKey] = { resizeWidth: resizeWidth };
                         });
                     }
                 }
@@ -809,12 +827,12 @@ export default defineComponent({
                     if (columnFixedStorage) {
                         var colFixeds = columnFixedStorage.split(',');
                         colFixeds.forEach(function (fixConf) {
-                            var _a = fixConf.split('|'), field = _a[0], fixed = _a[1];
-                            if (customMap_1[field]) {
-                                customMap_1[field].fixed = fixed;
+                            var _a = fixConf.split('|'), colKey = _a[0], fixed = _a[1];
+                            if (customMap_1[colKey]) {
+                                customMap_1[colKey].fixed = fixed;
                             }
                             else {
-                                customMap_1[field] = { field: field, fixed: fixed };
+                                customMap_1[colKey] = { fixed: fixed };
                             }
                         });
                     }
@@ -823,7 +841,15 @@ export default defineComponent({
                 if (isCustomOrder) {
                     var columnOrderStorage = getCustomStorageMap(orderStorageKey)[id];
                     if (columnOrderStorage) {
-                        // 开发中...
+                        // const colOrderSeqs = columnOrderStorage.split(',')
+                        // colOrderSeqs.forEach((orderConf: any) => {
+                        //   const [colKey, order] = orderConf.split('|')
+                        //   if (customMap[colKey]) {
+                        //     customMap[colKey].order = order
+                        //   } else {
+                        //     customMap[colKey] = { order }
+                        //   }
+                        // })
                     }
                 }
                 // 自定义隐藏列
@@ -833,20 +859,20 @@ export default defineComponent({
                         var colVisibles = columnVisibleStorage.split('|');
                         var colHides = colVisibles[0] ? colVisibles[0].split(',') : [];
                         var colShows = colVisibles[1] ? colVisibles[1].split(',') : [];
-                        colHides.forEach(function (field) {
-                            if (customMap_1[field]) {
-                                customMap_1[field].visible = false;
+                        colHides.forEach(function (colKey) {
+                            if (customMap_1[colKey]) {
+                                customMap_1[colKey].visible = false;
                             }
                             else {
-                                customMap_1[field] = { field: field, visible: false };
+                                customMap_1[colKey] = { visible: false };
                             }
                         });
-                        colShows.forEach(function (field) {
-                            if (customMap_1[field]) {
-                                customMap_1[field].visible = true;
+                        colShows.forEach(function (colKey) {
+                            if (customMap_1[colKey]) {
+                                customMap_1[colKey].visible = true;
                             }
                             else {
-                                customMap_1[field] = { field: field, visible: true };
+                                customMap_1[colKey] = { visible: true };
                             }
                         });
                     }
@@ -858,9 +884,9 @@ export default defineComponent({
                         keyMap_1[colKey] = column;
                     }
                 });
-                XEUtils.each(customMap_1, function (_a, field) {
-                    var visible = _a.visible, resizeWidth = _a.resizeWidth, fixed = _a.fixed;
-                    var column = keyMap_1[field];
+                XEUtils.each(customMap_1, function (_a, colKey) {
+                    var visible = _a.visible, resizeWidth = _a.resizeWidth, fixed = _a.fixed, order = _a.order;
+                    var column = keyMap_1[colKey];
                     if (column) {
                         if (XEUtils.isNumber(resizeWidth)) {
                             column.resizeWidth = resizeWidth;
@@ -871,6 +897,9 @@ export default defineComponent({
                         if (fixed) {
                             column.fixed = fixed;
                         }
+                        if (order) {
+                            column.customOrder = order;
+                        }
                     }
                 });
             }
@@ -2114,7 +2143,7 @@ export default defineComponent({
             internalData.tableSynchData = datas;
             // 克隆原数据，用于显示编辑状态，与编辑值做对比
             if (keepSource) {
-                internalData.tableSourceData = XEUtils.clone(fullData, true);
+                tablePrivateMethods.cacheSourceMap(fullData);
             }
             if (process.env.NODE_ENV === 'development') {
                 if (sYLoad) {
@@ -2866,35 +2895,22 @@ export default defineComponent({
              * @param {String} field 字段名
              */
             isUpdateByRow: function (row, field) {
-                var _a, _b;
-                var keepSource = props.keepSource, treeConfig = props.treeConfig;
-                var visibleColumn = internalData.visibleColumn, tableSourceData = internalData.tableSourceData, fullDataRowIdData = internalData.fullDataRowIdData;
-                var treeOpts = computeTreeOpts.value;
+                var keepSource = props.keepSource;
+                var tableFullColumn = internalData.tableFullColumn, fullDataRowIdData = internalData.fullDataRowIdData, sourceDataRowIdData = internalData.sourceDataRowIdData;
                 if (keepSource) {
-                    var oRow = void 0, property = void 0;
-                    var rowid_2 = getRowid($xetable, row);
+                    var rowid = getRowid($xetable, row);
                     // 新增的数据不需要检测
-                    if (!fullDataRowIdData[rowid_2]) {
+                    if (!fullDataRowIdData[rowid]) {
                         return false;
                     }
-                    if (treeConfig) {
-                        var children = treeOpts.children;
-                        var matchObj = XEUtils.findTree(tableSourceData, function (item) { return rowid_2 === getRowid($xetable, item); }, treeOpts);
-                        row = Object.assign({}, row, (_a = {}, _a[children] = null, _a));
-                        if (matchObj) {
-                            oRow = Object.assign({}, matchObj.item, (_b = {}, _b[children] = null, _b));
-                        }
-                    }
-                    else {
-                        var oRowIndex = fullDataRowIdData[rowid_2].index;
-                        oRow = tableSourceData[oRowIndex];
-                    }
-                    if (oRow) {
+                    var oldRest = sourceDataRowIdData[rowid];
+                    if (oldRest) {
+                        var oRow = oldRest.row;
                         if (arguments.length > 1) {
                             return !eqCellValue(oRow, row, field);
                         }
-                        for (var index = 0, len = visibleColumn.length; index < len; index++) {
-                            property = visibleColumn[index].field;
+                        for (var index = 0, len = tableFullColumn.length; index < len; index++) {
+                            var property = tableFullColumn[index].field;
                             if (property && !eqCellValue(oRow, row, property)) {
                                 return true;
                             }
@@ -3033,8 +3049,20 @@ export default defineComponent({
              */
             setColumnFixed: function (fieldOrColumn, fixed) {
                 var column = handleFieldOrColumn($xetable, fieldOrColumn);
-                if (column && column.fixed !== fixed) {
-                    XEUtils.eachTree([column], function (column) {
+                var targetColumn = getRootColumn($xetable, column);
+                var isMaxFixedColumn = computeIsMaxFixedColumn.value;
+                if (targetColumn && targetColumn.fixed !== fixed) {
+                    // 是否超过最大固定列数量
+                    if (!targetColumn.fixed && isMaxFixedColumn) {
+                        if (VXETable.modal) {
+                            VXETable.modal.message({
+                                status: 'error',
+                                content: GlobalConfig.i18n('vxe.table.maxFixedCol')
+                            });
+                        }
+                        return nextTick();
+                    }
+                    XEUtils.eachTree([targetColumn], function (column) {
                         column.fixed = fixed;
                     });
                     tablePrivateMethods.saveCustomFixed();
@@ -3047,8 +3075,9 @@ export default defineComponent({
              */
             clearColumnFixed: function (fieldOrColumn) {
                 var column = handleFieldOrColumn($xetable, fieldOrColumn);
-                if (column && column.fixed) {
-                    XEUtils.eachTree([column], function (column) {
+                var targetColumn = getRootColumn($xetable, column);
+                if (targetColumn && targetColumn.fixed) {
+                    XEUtils.eachTree([targetColumn], function (column) {
                         column.fixed = null;
                     });
                     tablePrivateMethods.saveCustomFixed();
@@ -3106,7 +3135,7 @@ export default defineComponent({
              * 如果已关联工具栏，则会同步更新
              */
             resetColumn: function (options) {
-                var tableFullColumn = internalData.tableFullColumn;
+                var collectColumn = internalData.collectColumn;
                 var customOpts = computeCustomOpts.value;
                 var checkMethod = customOpts.checkMethod;
                 var opts = Object.assign({
@@ -3114,7 +3143,7 @@ export default defineComponent({
                     resizable: options === true,
                     fixed: options === true
                 }, options);
-                tableFullColumn.forEach(function (column) {
+                XEUtils.eachTree(collectColumn, function (column) {
                     if (opts.resizable) {
                         column.resizeWidth = 0;
                     }
@@ -3294,22 +3323,22 @@ export default defineComponent({
                 var radioOpts = computeRadioOpts.value;
                 var treeOpts = computeTreeOpts.value;
                 if (radioOpts.reserve && radioReserveRow) {
-                    var rowid_3 = getRowid($xetable, radioReserveRow);
+                    var rowid_2 = getRowid($xetable, radioReserveRow);
                     if (isFull) {
-                        if (!fullDataRowIdData[rowid_3]) {
+                        if (!fullDataRowIdData[rowid_2]) {
                             return radioReserveRow;
                         }
                     }
                     else {
                         var rowkey_2 = getRowkey($xetable);
                         if (treeConfig) {
-                            var matchObj = XEUtils.findTree(afterFullData, function (row) { return rowid_3 === XEUtils.get(row, rowkey_2); }, treeOpts);
+                            var matchObj = XEUtils.findTree(afterFullData, function (row) { return rowid_2 === XEUtils.get(row, rowkey_2); }, treeOpts);
                             if (matchObj) {
                                 return radioReserveRow;
                             }
                         }
                         else {
-                            if (!afterFullData.some(function (row) { return rowid_3 === XEUtils.get(row, rowkey_2); })) {
+                            if (!afterFullData.some(function (row) { return rowid_2 === XEUtils.get(row, rowkey_2); })) {
                                 return radioReserveRow;
                             }
                         }
@@ -3459,16 +3488,16 @@ export default defineComponent({
                 var selectRow = reactData.selectRow;
                 var treeOpts = computeTreeOpts.value;
                 if (selectRow) {
-                    var rowid_4 = getRowid($xetable, selectRow);
+                    var rowid_3 = getRowid($xetable, selectRow);
                     if (isFull) {
-                        if (!fullDataRowIdData[rowid_4]) {
+                        if (!fullDataRowIdData[rowid_3]) {
                             return selectRow;
                         }
                     }
                     else {
                         if (treeConfig) {
                             var rowkey_3 = getRowkey($xetable);
-                            var matchObj = XEUtils.findTree(afterFullData, function (row) { return rowid_4 === XEUtils.get(row, rowkey_3); }, treeOpts);
+                            var matchObj = XEUtils.findTree(afterFullData, function (row) { return rowid_3 === XEUtils.get(row, rowkey_3); }, treeOpts);
                             if (matchObj) {
                                 return selectRow;
                             }
@@ -4043,7 +4072,7 @@ export default defineComponent({
                                         if (customVal && validStore.visible) {
                                             setCellValue(row_1, column_3, cellValue);
                                         }
-                                        $xetable.clearValidate();
+                                        $xetable.clearValidate(row_1, column_3);
                                     })
                                         .catch(function (_a) {
                                         var rule = _a.rule;
@@ -4794,7 +4823,7 @@ export default defineComponent({
                 var fullDataRowIdData = internalData.fullDataRowIdData, fullAllDataRowIdData = internalData.fullAllDataRowIdData, tableFullData = internalData.tableFullData, tableFullTreeData = internalData.tableFullTreeData;
                 var rowkey = getRowkey($xetable);
                 var isLazy = treeConfig && treeOpts.lazy;
-                var handleCache = function (row, index, items, path, parent, nodes) {
+                var handleRow = function (row, index, items, path, parent, nodes) {
                     var rowid = getRowid($xetable, row);
                     var seq = treeConfig && path ? toTreePathSeq(path) : index + 1;
                     var level = nodes ? nodes.length - 1 : 0;
@@ -4816,11 +4845,38 @@ export default defineComponent({
                 }
                 fullAllDataRowIdData = internalData.fullAllDataRowIdData = {};
                 if (treeConfig) {
-                    XEUtils.eachTree(tableFullTreeData, handleCache, treeOpts);
+                    XEUtils.eachTree(tableFullTreeData, handleRow, treeOpts);
+                }
+                else {
+                    tableFullData.forEach(handleRow);
+                }
+            },
+            cacheSourceMap: function (fullData) {
+                var treeConfig = props.treeConfig;
+                var treeOpts = computeTreeOpts.value;
+                var sourceDataRowIdData = internalData.sourceDataRowIdData;
+                var sourceData = XEUtils.clone(fullData, true);
+                var rowkey = getRowkey($xetable);
+                sourceDataRowIdData = internalData.sourceDataRowIdData = {};
+                var handleSourceRow = function (row) {
+                    var rowid = getRowid($xetable, row);
+                    if (eqEmptyValue(rowid)) {
+                        rowid = getRowUniqueId();
+                        XEUtils.set(row, rowkey, rowid);
+                    }
+                    sourceDataRowIdData[rowid] = {
+                        row: row,
+                        rowid: rowid
+                    };
+                };
+                // 源数据缓存
+                if (treeConfig && !treeOpts.transform) {
+                    XEUtils.eachTree(sourceData, handleSourceRow, treeOpts);
                 }
                 else {
-                    tableFullData.forEach(handleCache);
+                    sourceData.forEach(handleSourceRow);
                 }
+                internalData.tableSourceData = sourceData;
             },
             /**
              * 指定列宽的列进行拆分

package/es/table/src/util.js

@@ -205,6 +205,22 @@ export function destroyColumn($xetable, column) {
     }
     reactData.staticColumns = staticColumns.slice(0);
 }
+export function getRootColumn($xetable, column) {
+    var internalData = $xetable.internalData;
+    var fullColumnIdData = internalData.fullColumnIdData;
+    if (!column) {
+        return null;
+    }
+    var parentColId = column.parentId;
+    while (fullColumnIdData[parentColId]) {
+        var column_1 = fullColumnIdData[parentColId].column;
+        parentColId = column_1.parentId;
+        if (!parentColId) {
+            return column_1;
+        }
+    }
+    return column;
+}
 export function mergeBodyMethod(mergeList, _rowIndex, _columnIndex) {
     for (var mIndex = 0; mIndex < mergeList.length; mIndex++) {
         var _a = mergeList[mIndex], mergeRowIndex = _a.row, mergeColIndex = _a.col, mergeRowspan = _a.rowspan, mergeColspan = _a.colspan;

package/es/table/style.css

@@ -1222,15 +1222,17 @@
   position: relative;
 }
 .vxe-table--render-default .vxe-body--column.col--valid-error .vxe-cell--valid {
-  width: 320px;
+  width: 100%;
   position: absolute;
   left: 50%;
   font-size: 12px;
   line-height: 1.2em;
   transform: translateX(-50%);
-  text-align: center;
+  text-align: left;
   pointer-events: none;
   z-index: 4;
+  padding-left: var(--vxe-table-cell-padding-left);
+  padding-right: var(--vxe-table-cell-padding-right);
 }
 .vxe-table--render-default .vxe-body--column.col--valid-error .vxe-cell--valid .vxe-cell--valid-msg {
   display: inline-block;
@@ -1247,16 +1249,8 @@
   border-color: var(--vxe-table-validate-error-color);
 }
 .vxe-table--render-default .vxe-body--row:last-child .vxe-cell--valid {
-  top: -1.3em;
-}
-.vxe-table--render-default .vxe-body--row:first-child:last-child .vxe-cell--valid {
   top: calc(100% - 1.3em);
 }
-.vxe-table--render-default .vxe-body--column:first-child .vxe-cell--valid {
-  left: 10px;
-  transform: translateX(0);
-  text-align: left;
-}
 .vxe-table--render-default .vxe-body--row.row--new > .vxe-body--column {
   position: relative;
 }
@@ -1275,8 +1269,8 @@
 }
 .vxe-table--render-default .vxe-body--column.col--dirty:before {
   content: "";
-  top: var(--vxe-table-cell-dirty-width);
-  left: var(--vxe-table-cell-dirty-width);
+  top: calc(var(--vxe-table-cell-dirty-width) * -1);
+  left: calc(var(--vxe-table-cell-dirty-width) * -1);
   position: absolute;
   border-width: var(--vxe-table-cell-dirty-width);
   border-style: solid;