vxe-table 3.12.13 → 3.12.15

package/es/table/src/methods.js

@@ -1065,7 +1065,7 @@ const calcCellHeight = ($xeTable) => {
         reactData.calcCellHeightFlag++;
     }
 };
-function getOrderField(_vm, column) {
+function getOrderField($xeTable, column) {
     const { sortBy, sortType } = column;
     return (row) => {
         let cellValue;
@@ -1073,7 +1073,7 @@ function getOrderField(_vm, column) {
             cellValue = XEUtils.isFunction(sortBy) ? sortBy({ row, column }) : XEUtils.get(row, sortBy);
         }
         else {
-            cellValue = _vm.getCellLabel(row, column);
+            cellValue = $xeTable.getCellLabel(row, column);
         }
         if (!sortType || sortType === 'auto') {
             return isNaN(cellValue) ? cellValue : XEUtils.toNumber(cellValue);
@@ -2887,76 +2887,146 @@ const Methods = {
      */
     updateAfterFullData() {
         const $xeTable = this;
-        const { tableFullColumn, tableFullData, filterOpts, sortOpts, treeConfig, treeOpts, tableFullTreeData } = this;
+        const props = $xeTable;
+        const internalData = $xeTable;
+        const { treeConfig } = props;
+        const { tableFullColumn, tableFullData, tableFullTreeData } = internalData;
+        const filterOpts = $xeTable.computeFilterOpts;
+        const sortOpts = $xeTable.computeSortOpts;
+        const treeOpts = $xeTable.computeTreeOpts;
+        const childrenField = treeOpts.children || treeOpts.childrenField;
+        const { transform, rowField, parentField, mapChildrenField } = treeOpts;
         const { remote: allRemoteFilter, filterMethod: allFilterMethod } = filterOpts;
         const { remote: allRemoteSort, sortMethod: allSortMethod, multiple: sortMultiple, chronological } = sortOpts;
-        const { transform } = treeOpts;
-        const childrenField = treeOpts.children || treeOpts.childrenField;
         let tableData = [];
         let tableTree = [];
-        const filterColumns = [];
-        let orderColumns = [];
-        tableFullColumn.forEach((column) => {
-            const { field, sortable, order, filters } = column;
-            if (!allRemoteFilter && filters && filters.length) {
-                const valueList = [];
-                const itemList = [];
-                filters.forEach((item) => {
-                    if (item.checked) {
-                        itemList.push(item);
-                        valueList.push(item.value);
+        // 处理数据
+        if (!allRemoteFilter || !allRemoteSort) {
+            const filterColumns = [];
+            let orderColumns = [];
+            tableFullColumn.forEach((column) => {
+                const { field, sortable, order, filters } = column;
+                if (!allRemoteFilter && filters && filters.length) {
+                    const valueList = [];
+                    const itemList = [];
+                    filters.forEach((item) => {
+                        if (item.checked) {
+                            itemList.push(item);
+                            valueList.push(item.value);
+                        }
+                    });
+                    if (itemList.length) {
+                        filterColumns.push({ column, valueList, itemList });
                     }
-                });
-                if (itemList.length) {
-                    filterColumns.push({ column, valueList, itemList });
                 }
-            }
-            if (!allRemoteSort && sortable && order) {
-                orderColumns.push({ column, field, property: field, order, sortTime: column.sortTime });
-            }
-        });
-        if (sortMultiple && chronological && orderColumns.length > 1) {
-            orderColumns = XEUtils.orderBy(orderColumns, 'sortTime');
-        }
-        if (filterColumns.length) {
-            const handleFilter = (row) => {
-                return filterColumns.every(({ column, valueList, itemList }) => {
-                    if (valueList.length && !allRemoteFilter) {
-                        const { filterMethod, filterRender, field } = column;
+                if (!allRemoteSort && sortable && order) {
+                    orderColumns.push({ column, field, property: field, order: order, sortTime: column.sortTime });
+                }
+            });
+            if (sortMultiple && chronological && orderColumns.length > 1) {
+                orderColumns = XEUtils.orderBy(orderColumns, 'sortTime');
+            }
+            // 处理筛选
+            // 支持单列、多列、组合筛选
+            if (!allRemoteFilter && filterColumns.length) {
+                const handleFilter = (row) => {
+                    return filterColumns.every(({ column, valueList, itemList }) => {
+                        const { filterMethod, filterRender } = column;
                         const compConf = isEnableConf(filterRender) ? renderer.get(filterRender.name) : null;
                         const compFilterMethod = compConf ? (compConf.tableFilterMethod || compConf.filterMethod) : null;
                         const tdFilterMethod = compConf ? (compConf.tableFilterDefaultMethod || compConf.defaultTableFilterMethod || compConf.defaultFilterMethod) : null;
                         const cellValue = getCellValue(row, column);
                         if (filterMethod) {
-                            return itemList.some((item) => filterMethod({ value: item.value, option: item, cellValue, row, column, $table: this }));
+                            return itemList.some((item) => filterMethod({ value: item.value, option: item, cellValue, row, column, $table: $xeTable }));
                         }
                         else if (compFilterMethod) {
-                            return itemList.some((item) => compFilterMethod({ value: item.value, option: item, cellValue, row, column, $table: this }));
+                            return itemList.some((item) => compFilterMethod({ value: item.value, option: item, cellValue, row, column, $table: $xeTable }));
                         }
                         else if (allFilterMethod) {
                             return allFilterMethod({ options: itemList, values: valueList, cellValue, row, column });
                         }
                         else if (tdFilterMethod) {
-                            return itemList.some((item) => tdFilterMethod({ value: item.value, option: item, cellValue, row, column, $table: this }));
+                            return itemList.some((item) => tdFilterMethod({ value: item.value, option: item, cellValue, row, column, $table: $xeTable }));
                         }
-                        return valueList.indexOf(XEUtils.get(row, field)) > -1;
-                    }
-                    return true;
-                });
-            };
-            if (treeConfig && transform) {
-                // 筛选虚拟树
-                tableTree = XEUtils.searchTree(tableFullTreeData, handleFilter, {
-                    original: true,
-                    isEvery: true,
-                    children: treeOpts.mapChildrenField,
-                    mapChildren: childrenField
-                });
-                tableData = tableTree;
+                        return valueList.indexOf(XEUtils.get(row, column.field)) > -1;
+                    });
+                };
+                if (treeConfig && transform) {
+                    // 筛选虚拟树
+                    tableTree = XEUtils.searchTree(tableFullTreeData, handleFilter, {
+                        original: true,
+                        isEvery: true,
+                        children: mapChildrenField,
+                        mapChildren: childrenField
+                    });
+                    tableData = tableTree;
+                }
+                else {
+                    tableData = treeConfig ? tableFullTreeData.filter(handleFilter) : tableFullData.filter(handleFilter);
+                    tableTree = tableData;
+                }
             }
             else {
-                tableData = treeConfig ? tableFullTreeData.filter(handleFilter) : tableFullData.filter(handleFilter);
-                tableTree = tableData;
+                if (treeConfig && transform) {
+                    // 还原虚拟树
+                    tableTree = XEUtils.searchTree(tableFullTreeData, () => true, {
+                        original: true,
+                        isEvery: true,
+                        children: mapChildrenField,
+                        mapChildren: childrenField
+                    });
+                    tableData = tableTree;
+                }
+                else {
+                    tableData = treeConfig ? tableFullTreeData.slice(0) : tableFullData.slice(0);
+                    tableTree = tableData;
+                }
+            }
+            // 处理排序（不能用于树形结构）
+            // 支持单列、多列、组合排序
+            if (!allRemoteSort && orderColumns.length) {
+                if (treeConfig && transform) {
+                    // 虚拟树和列表一样，只能排序根级节点
+                    if (allSortMethod) {
+                        const sortRests = allSortMethod({ data: tableTree, sortList: orderColumns, $table: $xeTable });
+                        tableTree = XEUtils.isArray(sortRests) ? sortRests : tableTree;
+                    }
+                    else {
+                        const treeList = XEUtils.toTreeArray(tableTree, {
+                            children: mapChildrenField
+                        });
+                        tableTree = XEUtils.toArrayTree(XEUtils.orderBy(treeList, orderColumns.map(({ column, order }) => [getOrderField($xeTable, column), order])), {
+                            key: rowField,
+                            parentKey: parentField,
+                            children: childrenField,
+                            mapChildren: mapChildrenField
+                        });
+                    }
+                    tableData = tableTree;
+                }
+                else {
+                    if (allSortMethod) {
+                        const sortRests = allSortMethod({ data: tableData, sortList: orderColumns, $table: $xeTable });
+                        tableData = XEUtils.isArray(sortRests) ? sortRests : tableData;
+                    }
+                    else {
+                        // 兼容 v4
+                        if (sortMultiple) {
+                            tableData = XEUtils.orderBy(tableData, orderColumns.map(({ column, order }) => [getOrderField(this, column), order]));
+                        }
+                        else {
+                            const firstOrderColumn = orderColumns[0];
+                            let sortByConfs;
+                            // 已废弃，兼容 v2，在 v4 中废弃， sortBy 不能为数组
+                            if (XEUtils.isArray(firstOrderColumn.sortBy)) {
+                                sortByConfs = firstOrderColumn.sortBy.map((item) => [item, firstOrderColumn.order]);
+                            }
+                            tableData = XEUtils.orderBy(tableData, sortByConfs || [firstOrderColumn].map(({ column, order }) => [getOrderField(this, column), order]));
+                        }
+                        tableData = XEUtils.orderBy(tableData, orderColumns.map(({ column, order }) => [getOrderField($xeTable, column), order]));
+                    }
+                    tableTree = tableData;
+                }
             }
         }
         else {
@@ -2975,43 +3045,8 @@ const Methods = {
                 tableTree = tableData;
             }
         }
-        const firstOrderColumn = orderColumns[0];
-        if (!allRemoteSort && firstOrderColumn) {
-            if (treeConfig && transform) {
-                // 虚拟树和列表一样，只能排序根级节点
-                if (allSortMethod) {
-                    const sortRests = allSortMethod({ data: tableTree, sortList: orderColumns, $table: this });
-                    tableTree = XEUtils.isArray(sortRests) ? sortRests : tableTree;
-                }
-                else {
-                    tableTree = XEUtils.orderBy(tableTree, orderColumns.map(({ column, order }) => [getOrderField(this, column), order]));
-                }
-                tableData = tableTree;
-            }
-            else {
-                if (allSortMethod) {
-                    const sortRests = allSortMethod({ data: tableData, column: firstOrderColumn.column, property: firstOrderColumn.field, field: firstOrderColumn.field, order: firstOrderColumn.order, sortList: orderColumns, $table: this });
-                    tableData = XEUtils.isArray(sortRests) ? sortRests : tableData;
-                }
-                else {
-                    // 兼容 v4
-                    if (sortMultiple) {
-                        tableData = XEUtils.orderBy(tableData, orderColumns.map(({ column, order }) => [getOrderField(this, column), order]));
-                    }
-                    else {
-                        // 兼容 v2，在 v4 中废弃， sortBy 不能为数组
-                        let sortByConfs;
-                        if (XEUtils.isArray(firstOrderColumn.sortBy)) {
-                            sortByConfs = firstOrderColumn.sortBy.map((item) => [item, firstOrderColumn.order]);
-                        }
-                        tableData = XEUtils.orderBy(tableData, sortByConfs || [firstOrderColumn].map(({ column, order }) => [getOrderField(this, column), order]));
-                    }
-                }
-                tableTree = tableData;
-            }
-        }
-        this.afterFullData = tableData;
-        this.afterTreeFullData = tableTree;
+        internalData.afterFullData = tableData;
+        internalData.afterTreeFullData = tableTree;
         updateAfterDataIndex($xeTable);
     },
     /**
@@ -6041,8 +6076,8 @@ const Methods = {
         const $xeTable = this;
         const sortOpts = $xeTable.computeSortOpts;
         const { multiple, allowClear } = sortOpts;
-        const { field, sortable, remoteSort } = column;
-        if (sortable || remoteSort) {
+        const { field, sortable } = column;
+        if (sortable || column.remoteSort) {
             if (!order || column.order === order) {
                 if (allowClear) {
                     $xeTable.clearSort(multiple ? column : null);
@@ -6054,6 +6089,34 @@ const Methods = {
             $xeTable.handleColumnSortEvent(evnt, column);
         }
     },
+    handleCellRuleUpdateStatus(type, cellParams, cellValue) {
+        const $xeTable = this;
+        const reactData = $xeTable;
+        const { validStore } = reactData;
+        const { row, column } = cellParams;
+        if ($xeTable.hasCellRules) {
+            if ($xeTable.hasCellRules(type, row, column)) {
+                const cell = $xeTable.getCellElement(row, column);
+                if (cell) {
+                    const customVal = !XEUtils.isUndefined(cellValue);
+                    return $xeTable.validCellRules(type, row, column, cellValue)
+                        .then(() => {
+                        if (customVal && validStore.visible) {
+                            setCellValue(row, column, cellValue);
+                        }
+                        $xeTable.clearValidate(row, column);
+                    })
+                        .catch(({ rule }) => {
+                        if (customVal) {
+                            setCellValue(row, column, cellValue);
+                        }
+                        $xeTable.showValidTooltip({ rule, row, column, cell });
+                    });
+                }
+            }
+        }
+        return $xeTable.$nextTick();
+    },
     /**
      * 表头单元格按下事件
      */
@@ -8341,33 +8404,12 @@ const Methods = {
      * 如果单元格配置了校验规则，则会进行校验
      */
     updateStatus(slotParams, cellValue) {
-        const customVal = !XEUtils.isUndefined(cellValue);
+        const $xeTable = this;
+        const props = $xeTable;
         return this.$nextTick().then(() => {
-            const { $refs, editRules, validStore } = this;
-            const refTableBody = $refs.refTableBody;
-            if (slotParams && refTableBody && editRules) {
-                const { row, column } = slotParams;
-                const type = 'change';
-                if (this.hasCellRules) {
-                    if (this.hasCellRules(type, row, column)) {
-                        const cell = this.getCellElement(row, column);
-                        if (cell) {
-                            return this.validCellRules(type, row, column, cellValue)
-                                .then(() => {
-                                if (customVal && validStore.visible) {
-                                    setCellValue(row, column, cellValue);
-                                }
-                                this.clearValidate(row, column);
-                            })
-                                .catch(({ rule }) => {
-                                if (customVal) {
-                                    setCellValue(row, column, cellValue);
-                                }
-                                this.showValidTooltip({ rule, row, column, cell });
-                            });
-                        }
-                    }
-                }
+            const { editRules } = props;
+            if (slotParams && editRules) {
+                return $xeTable.handleCellRuleUpdateStatus('change', slotParams, cellValue);
             }
         });
     },

package/es/table/src/table.js

@@ -496,7 +496,6 @@ export default {
                     column: null
                 },
                 insertMaps: {},
-                removeList: [],
                 removeMaps: {}
             },
             // 存放 tooltip 相关信息
@@ -554,6 +553,12 @@ export default {
                 isHeader: false,
                 isFooter: false
             },
+            rowHeightStore: {
+                default: 48,
+                medium: 44,
+                small: 40,
+                mini: 36
+            },
             scrollVMLoading: false,
             calcCellHeightFlag: 0,
             resizeHeightFlag: 0,
@@ -649,12 +654,9 @@ export default {
             return this.computeRowHeightMaps;
         },
         computeRowHeightMaps() {
-            return {
-                default: 48,
-                medium: 44,
-                small: 40,
-                mini: 36
-            };
+            const $xeTable = this;
+            const reactData = $xeTable;
+            return reactData.rowHeightStore;
         },
         computeDefaultRowHeight() {
             const $xeTable = this;
@@ -1365,9 +1367,27 @@ export default {
     mounted() {
         const $xeTable = this;
         const props = $xeTable;
+        const reactData = $xeTable;
+        const { rowHeightStore } = reactData;
+        const varEl = $xeTable.$refs.refVarElem;
         const columnOpts = $xeTable.computeColumnOpts;
         const rowOpts = $xeTable.computeRowOpts;
         const customOpts = $xeTable.computeCustomOpts;
+        if (varEl) {
+            const [defEl, mediumEl, smallEl, miniEl] = varEl.children;
+            if (defEl) {
+                rowHeightStore.default = defEl.clientHeight;
+            }
+            if (mediumEl) {
+                rowHeightStore.medium = mediumEl.clientHeight;
+            }
+            if (smallEl) {
+                rowHeightStore.small = smallEl.clientHeight;
+            }
+            if (miniEl) {
+                rowHeightStore.mini = miniEl.clientHeight;
+            }
+        }
         if (columnOpts.drag || rowOpts.drag || customOpts.allowSort) {
             initTpImg();
         }
@@ -1518,6 +1538,23 @@ export default {
                 class: 'vxe-table-slots',
                 ref: 'hideColumn'
             }, this.$slots.default),
+            h('div', {
+                ref: 'refVarElem',
+                class: 'vxe-table-vars'
+            }, [
+                h('div', {
+                    class: 'vxe-table-var-default'
+                }),
+                h('div', {
+                    class: 'vxe-table-var-medium'
+                }),
+                h('div', {
+                    class: 'vxe-table-var-small'
+                }),
+                h('div', {
+                    class: 'vxe-table-var-mini'
+                })
+            ]),
             h('div', {
                 key: 'tw',
                 class: 'vxe-table--render-wrapper'

package/es/table/style.css

@@ -1682,6 +1682,29 @@
   display: none;
 }
 
+.vxe-table-vars {
+  height: 0;
+  width: 0;
+  visibility: hidden;
+  overflow: hidden;
+  -webkit-user-select: none;
+     -moz-user-select: none;
+          user-select: none;
+  pointer-events: none;
+}
+.vxe-table-vars .vxe-table-var-default {
+  height: var(--vxe-ui-table-row-height-default);
+}
+.vxe-table-vars .vxe-table-var-medium {
+  height: var(--vxe-ui-table-row-height-medium);
+}
+.vxe-table-vars .vxe-table-var-small {
+  height: var(--vxe-ui-table-row-height-small);
+}
+.vxe-table-vars .vxe-table-var-mini {
+  height: var(--vxe-ui-table-row-height-mini);
+}
+
 .vxe-table--print-frame {
   position: fixed;
   bottom: -100%;
@@ -2638,6 +2661,9 @@
 .vxe-table--render-default.size--medium .vxe-cell .vxe-default-input[type=date]::-webkit-inner-spin-button {
   margin-top: 3px;
 }
+.vxe-table--render-default.size--medium .vxe-cell--valid-error-tip {
+  padding: 0 var(--vxe-ui-table-cell-padding-medium);
+}
 .vxe-table--render-default.size--small {
   font-size: var(--vxe-ui-font-size-small);
 }
@@ -2663,6 +2689,9 @@
 .vxe-table--render-default.size--small .vxe-cell .vxe-default-input[type=date]::-webkit-inner-spin-button {
   margin-top: 2px;
 }
+.vxe-table--render-default.size--small .vxe-cell--valid-error-tip {
+  padding: 0 var(--vxe-ui-table-cell-padding-small);
+}
 .vxe-table--render-default.size--mini {
   font-size: var(--vxe-ui-font-size-mini);
 }
@@ -2688,6 +2717,9 @@
 .vxe-table--render-default.size--mini .vxe-cell .vxe-default-input[type=date]::-webkit-inner-spin-button {
   margin-top: 1px;
 }
+.vxe-table--render-default.size--mini .vxe-cell--valid-error-tip {
+  padding: 0 var(--vxe-ui-table-cell-padding-mini);
+}
 .vxe-table--render-default .vxe-header--column.is--padding .vxe-cell,
 .vxe-table--render-default .vxe-body--column.is--padding .vxe-cell,
 .vxe-table--render-default .vxe-footer--column.is--padding .vxe-cell {
@@ -3265,8 +3297,7 @@
   transform: translateX(-50%);
   text-align: left;
   z-index: 4;
-  padding-left: var(--vxe-ui-table-cell-padding-left);
-  padding-right: var(--vxe-ui-table-cell-padding-right);
+  padding: 0 var(--vxe-ui-table-cell-padding-default);
 }
 .vxe-table--render-default .vxe-body--column .vxe-cell--valid-error-wrapper {
   display: inline-block;