vxe-table 3.15.5 → 3.15.7

package/es/table/src/cell.js

@@ -84,7 +84,7 @@ function renderCellBaseVNs(h, params, content) {
     const treeOpts = $table.computeTreeOpts;
     const { showIcon, isPeerDrag, isCrossDrag, visibleMethod } = rowDragOpts;
     const rVisibleMethod = visibleMethod || (dragConfig ? dragConfig.rowVisibleMethod : null);
-    const vns = XEUtils.isArray(content) ? content : [content];
+    const vns = [];
     if (dragSort && rowOpts.drag && ((showIcon || (dragConfig ? dragConfig.showRowIcon : false)) && (!rVisibleMethod || rVisibleMethod(params)))) {
         if (treeConfig) {
             if (treeOpts.transform && (isPeerDrag || isCrossDrag || !level)) {
@@ -95,7 +95,7 @@ function renderCellBaseVNs(h, params, content) {
             vns.unshift(renderCellDragIcon(h, params));
         }
     }
-    return vns;
+    return vns.concat(XEUtils.isArray(content) ? content : [content]);
 }
 function renderHeaderCellDragIcon(h, params) {
     const { $table, column } = params;
@@ -242,25 +242,26 @@ function renderCellHandle(h, params) {
     const { column, $table } = params;
     const tableProps = $table;
     const { editConfig } = tableProps;
-    const { type, treeNode, editRender } = column;
+    const { type, treeNode, rowGroupNode, editRender } = column;
     const checkboxOpts = $table.computeCheckboxOpts;
     const editOpts = $table.computeEditOpts;
+    const isDeepCell = treeNode || rowGroupNode;
     switch (type) {
         case 'seq':
-            return treeNode ? Cell.renderTreeIndexCell(h, params) : Cell.renderSeqCell(h, params);
+            return isDeepCell ? Cell.renderDeepIndexCell(h, params) : Cell.renderSeqCell(h, params);
         case 'radio':
-            return treeNode ? Cell.renderTreeRadioCell(h, params) : Cell.renderRadioCell(h, params);
+            return isDeepCell ? Cell.renderDeepRadioCell(h, params) : Cell.renderRadioCell(h, params);
         case 'checkbox':
-            return checkboxOpts.checkField ? (treeNode ? Cell.renderTreeSelectionCellByProp(h, params) : Cell.renderCheckboxCellByProp(h, params)) : (treeNode ? Cell.renderTreeSelectionCell(h, params) : Cell.renderCheckboxCell(h, params));
+            return checkboxOpts.checkField ? (isDeepCell ? Cell.renderDeepSelectionCellByProp(h, params) : Cell.renderCheckboxCellByProp(h, params)) : (isDeepCell ? Cell.renderDeepSelectionCell(h, params) : Cell.renderCheckboxCell(h, params));
         case 'expand':
             return Cell.renderExpandCell(h, params);
         case 'html':
-            return treeNode ? Cell.renderTreeHTMLCell(h, params) : Cell.renderHTMLCell(h, params);
+            return isDeepCell ? Cell.renderDeepHTMLCell(h, params) : Cell.renderHTMLCell(h, params);
     }
     if (isEnableConf(editConfig) && editRender) {
-        return editOpts.mode === 'cell' ? (treeNode ? Cell.renderTreeCellEdit(h, params) : Cell.renderCellEdit(h, params)) : (treeNode ? Cell.renderTreeRowEdit(h, params) : Cell.renderRowEdit(h, params));
+        return editOpts.mode === 'cell' ? (isDeepCell ? Cell.renderDeepCellEdit(h, params) : Cell.renderCellEdit(h, params)) : (isDeepCell ? Cell.renderDeepRowEdit(h, params) : Cell.renderRowEdit(h, params));
     }
-    return treeNode ? Cell.renderTreeCell(h, params) : Cell.renderDefaultCell(h, params);
+    return isDeepCell ? Cell.renderDeepCell(h, params) : Cell.renderDefaultCell(h, params);
 }
 function renderHeaderHandle(h, params) {
     const { column, $table } = params;
@@ -340,7 +341,10 @@ export const Cell = {
     },
     renderDefaultCell(h, params) {
         const { $table, row, column } = params;
-        const { slots, editRender, cellRender } = column;
+        const tableReactData = $table;
+        const tableInternalData = $table;
+        const { isRowGroupStatus } = tableReactData;
+        const { slots, editRender, cellRender, rowGroupNode } = column;
         const renderOpts = editRender || cellRender;
         if (slots && slots.default) {
             return renderCellBaseVNs(h, params, $table.callSlot(slots.default, params, h));
@@ -354,7 +358,35 @@ export const Cell = {
                 return renderCellBaseVNs(h, params, getSlotVNs(renderFn.call($table, h, renderOpts, Object.assign({ $type: editRender ? 'edit' : 'cell' }, params))));
             }
         }
-        const cellValue = $table.getCellLabel(row, column);
+        let cellValue = '';
+        if (isRowGroupStatus && rowGroupNode && row.isAggregate) {
+            const { fullColumnFieldData } = tableInternalData;
+            const rowGroupOpts = $table.computeRowGroupOpts;
+            const { showTotal, totalMethod, contentMethod, mapChildrenField } = rowGroupOpts;
+            const groupField = row.groupField;
+            cellValue = row.groupContent;
+            const childList = mapChildrenField ? (row[mapChildrenField] || []) : [];
+            const totalValue = childList.length;
+            const colRest = fullColumnFieldData[groupField] || {};
+            const params = {
+                $table,
+                groupField,
+                groupColumn: (colRest ? colRest.column : null),
+                column,
+                groupValue: cellValue,
+                children: childList,
+                totalValue: totalValue
+            };
+            if (contentMethod) {
+                cellValue = `${contentMethod(params)}`;
+            }
+            if (showTotal) {
+                cellValue = getI18n('vxe.table.rowGroupContentTotal', [cellValue, totalMethod ? totalMethod(params) : totalValue, totalValue]);
+            }
+        }
+        else if (!(isRowGroupStatus && row.isAggregate)) {
+            cellValue = $table.getCellLabel(row, column);
+        }
         const cellPlaceholder = editRender ? editRender.placeholder : '';
         return renderCellBaseVNs(h, params, [
             h('span', {
@@ -369,16 +401,57 @@ export const Cell = {
             ])
         ]);
     },
-    renderTreeCell(h, params) {
-        return Cell.renderTreeIcon(h, params, Cell.renderDefaultCell.call(this, h, params));
+    renderDeepCell(h, params) {
+        return Cell.renderDeepNodeBtn(h, params, Cell.renderDefaultCell.call(this, h, params));
     },
     renderDefaultFooter(h, params) {
         return getFooterContent(h, params);
     },
     /**
-     * 树节点
+     * 行分组
+     */
+    renderRowGroupBtn(h, params, cellVNodes) {
+        const { $table } = params;
+        const tableReactData = $table;
+        const tableInternalData = $table;
+        const { row, level } = params;
+        const { rowGroupExpandedFlag } = tableReactData;
+        const { rowGroupExpandedMaps } = tableInternalData;
+        const rowGroupOpts = $table.computeRowGroupOpts;
+        const { padding, indent } = rowGroupOpts;
+        const rowid = getRowid($table, row);
+        const isExpand = !!rowGroupExpandedFlag && !!rowGroupExpandedMaps[rowid];
+        return h('div', {
+            class: ['vxe-row-group--tree-node', {
+                    'is--expanded': isExpand
+                }],
+            style: padding && indent
+                ? {
+                    paddingLeft: `${level * indent}px`
+                }
+                : undefined
+        }, [
+            h('span', {
+                class: 'vxe-row-group--node-btn',
+                on: {
+                    click(evnt) {
+                        $table.triggerRowGroupExpandEvent(evnt, params);
+                    }
+                }
+            }, [
+                h('i', {
+                    class: isExpand ? getIcon().TABLE_ROW_GROUP_OPEN : getIcon().TABLE_ROW_GROUP_CLOSE
+                })
+            ]),
+            h('div', {
+                class: 'vxe-row-group-cell'
+            }, cellVNodes)
+        ]);
+    },
+    /**
+     * 树
      */
-    renderTreeIcon(h, params, cellVNodes) {
+    renderTreeNodeBtn(h, params, cellVNodes) {
         const { $table, isHidden } = params;
         const tableReactData = $table;
         const tableInternalData = $table;
@@ -387,7 +460,7 @@ export const Cell = {
         const treeOpts = $table.computeTreeOpts;
         const { row, column, level } = params;
         const { slots } = column;
-        const { indent, lazy, trigger, iconLoaded, showIcon, iconOpen, iconClose } = treeOpts;
+        const { padding, indent, lazy, trigger, iconLoaded, showIcon, iconOpen, iconClose } = treeOpts;
         const childrenField = treeOpts.children || treeOpts.childrenField;
         const hasChildField = treeOpts.hasChild || treeOpts.hasChildField;
         const rowChilds = row[childrenField];
@@ -421,18 +494,20 @@ export const Cell = {
                 class: ['vxe-cell--tree-node', {
                         'is--active': isActive
                     }],
-                style: {
-                    paddingLeft: `${level * indent}px`
-                }
+                style: padding && indent
+                    ? {
+                        paddingLeft: `${level * indent}px`
+                    }
+                    : undefined
             }, [
                 showIcon && (lazy ? (isLazyLoaded ? hasChild : (hasChild || hasLazyChilds)) : hasChild)
                     ? [
                         h('div', {
-                            class: 'vxe-tree--btn-wrapper',
+                            class: 'vxe-cell--tree-btn',
                             on: ons
                         }, [
                             h('i', {
-                                class: ['vxe-tree--node-btn', isLazyLoading ? (iconLoaded || getIcon().TABLE_TREE_LOADED) : (isActive ? (iconOpen || getIcon().TABLE_TREE_OPEN) : (iconClose || getIcon().TABLE_TREE_CLOSE))]
+                                class: isLazyLoading ? (iconLoaded || getIcon().TABLE_TREE_LOADED) : (isActive ? (iconOpen || getIcon().TABLE_TREE_OPEN) : (iconClose || getIcon().TABLE_TREE_CLOSE))
                             })
                         ])
                     ]
@@ -443,6 +518,18 @@ export const Cell = {
             ])
         ];
     },
+    /**
+     * 层级节点。
+     * 行分组、树结构
+     */
+    renderDeepNodeBtn(h, params, cellVNodes) {
+        const { row, column } = params;
+        const { rowGroupNode } = column;
+        if (rowGroupNode && row.isAggregate) {
+            return [Cell.renderRowGroupBtn(h, params, cellVNodes)];
+        }
+        return [Cell.renderTreeNodeBtn(h, params, cellVNodes)];
+    },
     /**
      * 序号
      */
@@ -466,8 +553,8 @@ export const Cell = {
             h('span', `${formatText(seqMethod ? seqMethod(params) : treeConfig ? seq : (seqOpts.startIndex || 0) + seq, 1)}`)
         ]);
     },
-    renderTreeIndexCell(h, params) {
-        return Cell.renderTreeIcon(h, params, Cell.renderSeqCell(h, params));
+    renderDeepIndexCell(h, params) {
+        return Cell.renderDeepNodeBtn(h, params, Cell.renderSeqCell(h, params));
     },
     /**
      * 单选
@@ -496,7 +583,7 @@ export const Cell = {
         const defaultSlot = slots ? slots.default : null;
         const radioSlot = slots ? slots.radio : null;
         const isChecked = row === selectRadioRow;
-        const isVisible = !visibleMethod || visibleMethod({ row });
+        const isVisible = !visibleMethod || visibleMethod({ $table, row });
         let isDisabled = !!checkMethod;
         let on;
         if (!isHidden) {
@@ -508,7 +595,7 @@ export const Cell = {
                 }
             };
             if (checkMethod) {
-                isDisabled = !checkMethod({ row });
+                isDisabled = !checkMethod({ $table, row });
             }
         }
         const radioParams = Object.assign(Object.assign({}, params), { checked: isChecked, disabled: isDisabled, visible: isVisible });
@@ -536,8 +623,8 @@ export const Cell = {
             }, radioVNs)
         ]);
     },
-    renderTreeRadioCell(h, params) {
-        return Cell.renderTreeIcon(h, params, Cell.renderRadioCell(h, params));
+    renderDeepRadioCell(h, params) {
+        return Cell.renderDeepNodeBtn(h, params, Cell.renderRadioCell(h, params));
     },
     /**
      * 多选
@@ -602,7 +689,7 @@ export const Cell = {
         const tableReactData = $table;
         const tableInternalData = $table;
         const { treeConfig } = tableProps;
-        const { updateCheckboxFlag } = tableReactData;
+        const { updateCheckboxFlag, isRowGroupStatus } = tableReactData;
         const { selectCheckboxMaps, treeIndeterminateRowMaps } = tableInternalData;
         const checkboxOpts = $table.computeCheckboxOpts;
         const { labelField, checkMethod, visibleMethod } = checkboxOpts;
@@ -611,7 +698,7 @@ export const Cell = {
         const checkboxSlot = slots ? slots.checkbox : null;
         let indeterminate = false;
         let isChecked = false;
-        const isVisible = !visibleMethod || visibleMethod({ row });
+        const isVisible = !visibleMethod || visibleMethod({ $table, row });
         let isDisabled = !!checkMethod;
         const ons = {};
         if (!isHidden) {
@@ -623,9 +710,9 @@ export const Cell = {
                 }
             };
             if (checkMethod) {
-                isDisabled = !checkMethod({ row });
+                isDisabled = !checkMethod({ $table, row });
             }
-            if (treeConfig) {
+            if (treeConfig || isRowGroupStatus) {
                 indeterminate = !!treeIndeterminateRowMaps[rowid];
             }
         }
@@ -656,8 +743,8 @@ export const Cell = {
             }, checkVNs)
         ]);
     },
-    renderTreeSelectionCell(h, params) {
-        return Cell.renderTreeIcon(h, params, Cell.renderCheckboxCell(h, params));
+    renderDeepSelectionCell(h, params) {
+        return Cell.renderDeepNodeBtn(h, params, Cell.renderCheckboxCell(h, params));
     },
     renderCheckboxCellByProp(h, params) {
         const { $table, row, column, isHidden } = params;
@@ -665,7 +752,7 @@ export const Cell = {
         const tableReactData = $table;
         const tableInternalData = $table;
         const { treeConfig } = tableProps;
-        const { updateCheckboxFlag } = tableReactData;
+        const { updateCheckboxFlag, isRowGroupStatus } = tableReactData;
         const { treeIndeterminateRowMaps } = tableInternalData;
         const checkboxOpts = $table.computeCheckboxOpts;
         const { labelField, checkField, checkMethod, visibleMethod } = checkboxOpts;
@@ -675,7 +762,7 @@ export const Cell = {
         const checkboxSlot = slots ? slots.checkbox : null;
         let isIndeterminate = false;
         let isChecked = false;
-        const isVisible = !visibleMethod || visibleMethod({ row });
+        const isVisible = !visibleMethod || visibleMethod({ $table, row });
         let isDisabled = !!checkMethod;
         const ons = {};
         if (!isHidden) {
@@ -687,9 +774,9 @@ export const Cell = {
                 }
             };
             if (checkMethod) {
-                isDisabled = !checkMethod({ row });
+                isDisabled = !checkMethod({ $table, row });
             }
-            if (treeConfig) {
+            if (treeConfig || isRowGroupStatus) {
                 isIndeterminate = !!treeIndeterminateRowMaps[rowid];
             }
         }
@@ -720,15 +807,17 @@ export const Cell = {
             }, checkVNs)
         ]);
     },
-    renderTreeSelectionCellByProp(h, params) {
-        return Cell.renderTreeIcon(h, params, Cell.renderCheckboxCellByProp(h, params));
+    renderDeepSelectionCellByProp(h, params) {
+        return Cell.renderDeepNodeBtn(h, params, Cell.renderCheckboxCellByProp(h, params));
     },
     /**
      * 展开行
      */
     renderExpandCell(h, params) {
         const { $table, isHidden, row, column } = params;
+        const tableReactData = $table;
         const tableInternalData = $table;
+        const { isRowGroupStatus } = tableReactData;
         const { rowExpandedMaps, rowExpandLazyLoadedMaps } = tableInternalData;
         const expandOpts = $table.computeExpandOpts;
         const { lazy, labelField, iconLoaded, showIcon, iconOpen, iconClose, visibleMethod } = expandOpts;
@@ -737,6 +826,9 @@ export const Cell = {
         const iconSlot = slots ? slots.icon : null;
         let isActive = false;
         let isLazyLoading = false;
+        if (isRowGroupStatus && row.isAggregate) {
+            return renderCellBaseVNs(h, params, []);
+        }
         if (iconSlot) {
             return renderCellBaseVNs(h, params, $table.callSlot(iconSlot, params, h));
         }
@@ -807,8 +899,8 @@ export const Cell = {
             })
         ]);
     },
-    renderTreeHTMLCell(h, params) {
-        return Cell.renderTreeIcon(h, params, Cell.renderHTMLCell(h, params));
+    renderDeepHTMLCell(h, params) {
+        return Cell.renderDeepNodeBtn(h, params, Cell.renderHTMLCell(h, params));
     },
     /**
      * 排序和筛选
@@ -949,8 +1041,8 @@ export const Cell = {
         const { editRender } = column;
         return Cell.runRenderer(h, params, this, isEnableConf(editRender) && actived && actived.row === params.row);
     },
-    renderTreeRowEdit(h, params) {
-        return Cell.renderTreeIcon(h, params, Cell.renderRowEdit(h, params));
+    renderDeepRowEdit(h, params) {
+        return Cell.renderDeepNodeBtn(h, params, Cell.renderRowEdit(h, params));
     },
     // 单元格编辑模式
     renderCellEdit(h, params) {
@@ -961,8 +1053,8 @@ export const Cell = {
         const { editRender } = column;
         return Cell.runRenderer(h, params, this, isEnableConf(editRender) && actived && actived.row === params.row && actived.column === params.column);
     },
-    renderTreeCellEdit(h, params) {
-        return Cell.renderTreeIcon(h, params, Cell.renderCellEdit(h, params));
+    renderDeepCellEdit(h, params) {
+        return Cell.renderDeepNodeBtn(h, params, Cell.renderCellEdit(h, params));
     },
     runRenderer(h, params, _vm, isEdit) {
         const { $table, column } = params;

package/es/table/src/column.js

@@ -95,6 +95,8 @@ export const columnProps = {
     filterRecoverMethod: Function,
     // 筛选模板配置项
     filterRender: Object,
+    // 设置为分组节点
+    rowGroupNode: Boolean,
     // 设置为树节点
     treeNode: Boolean,
     // 设置为拖拽排序

package/es/table/src/columnInfo.js

@@ -83,6 +83,7 @@ export class ColumnInfo {
             filterResetMethod: _vm.filterResetMethod,
             filterRecoverMethod: _vm.filterRecoverMethod,
             filterRender: _vm.filterRender,
+            rowGroupNode: _vm.rowGroupNode,
             treeNode: _vm.treeNode,
             dragSort: _vm.dragSort,
             rowResize: _vm.rowResize,