vxe-table 4.13.5 → 4.13.6

package/es/table/src/cell.js

@@ -81,18 +81,18 @@ function renderCellBaseVNs(params, content) {
     const treeOpts = computeTreeOpts.value;
     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)) {
-                vns.unshift(renderCellDragIcon(params));
+                vns.push(renderCellDragIcon(params));
             }
         }
         else {
-            vns.unshift(renderCellDragIcon(params));
+            vns.push(renderCellDragIcon(params));
         }
     }
-    return vns;
+    return vns.concat(XEUtils.isArray(content) ? content : [content]);
 }
 function renderHeaderCellDragIcon(params) {
     const { $table, column } = params;
@@ -246,26 +246,27 @@ function renderCellHandle(params) {
     const { column, $table } = params;
     const tableProps = $table.props;
     const { editConfig } = tableProps;
-    const { type, treeNode, editRender } = column;
+    const { type, treeNode, rowGroupNode, editRender } = column;
     const { computeEditOpts, computeCheckboxOpts } = $table.getComputeMaps();
     const checkboxOpts = computeCheckboxOpts.value;
     const editOpts = computeEditOpts.value;
+    const isDeepCell = treeNode || rowGroupNode;
     switch (type) {
         case 'seq':
-            return treeNode ? Cell.renderTreeIndexCell(params) : Cell.renderSeqCell(params);
+            return isDeepCell ? Cell.renderDeepIndexCell(params) : Cell.renderSeqCell(params);
         case 'radio':
-            return treeNode ? Cell.renderTreeRadioCell(params) : Cell.renderRadioCell(params);
+            return isDeepCell ? Cell.renderDeepRadioCell(params) : Cell.renderRadioCell(params);
         case 'checkbox':
-            return checkboxOpts.checkField ? (treeNode ? Cell.renderTreeSelectionCellByProp(params) : Cell.renderCheckboxCellByProp(params)) : (treeNode ? Cell.renderTreeSelectionCell(params) : Cell.renderCheckboxCell(params));
+            return checkboxOpts.checkField ? (isDeepCell ? Cell.renderDeepSelectionCellByProp(params) : Cell.renderCheckboxCellByProp(params)) : (isDeepCell ? Cell.renderDeepSelectionCell(params) : Cell.renderCheckboxCell(params));
         case 'expand':
             return Cell.renderExpandCell(params);
         case 'html':
-            return treeNode ? Cell.renderTreeHTMLCell(params) : Cell.renderHTMLCell(params);
+            return isDeepCell ? Cell.renderDeepHTMLCell(params) : Cell.renderHTMLCell(params);
     }
     if (isEnableConf(editConfig) && editRender) {
-        return editOpts.mode === 'cell' ? (treeNode ? Cell.renderTreeCellEdit(params) : Cell.renderCellEdit(params)) : (treeNode ? Cell.renderTreeRowEdit(params) : Cell.renderRowEdit(params));
+        return editOpts.mode === 'cell' ? (isDeepCell ? Cell.renderDeepCellEdit(params) : Cell.renderCellEdit(params)) : (isDeepCell ? Cell.renderDeepRowEdit(params) : Cell.renderRowEdit(params));
     }
-    return treeNode ? Cell.renderTreeCell(params) : Cell.renderDefaultCell(params);
+    return isDeepCell ? Cell.renderDeepCell(params) : Cell.renderDefaultCell(params);
 }
 function renderHeaderHandle(params) {
     const { column, $table } = params;
@@ -348,7 +349,10 @@ export const Cell = {
     },
     renderDefaultCell(params) {
         const { $table, row, column } = params;
-        const { slots, editRender, cellRender } = column;
+        const tableReactData = $table.reactData;
+        const tableInternalData = $table.internalData;
+        const { isRowGroupStatus } = tableReactData;
+        const { slots, editRender, cellRender, rowGroupNode } = column;
         const renderOpts = editRender || cellRender;
         const defaultSlot = slots ? slots.default : null;
         if (defaultSlot) {
@@ -365,7 +369,36 @@ export const Cell = {
                 }
             }
         }
-        const cellValue = $table.getCellLabel(row, column);
+        let cellValue = '';
+        if (isRowGroupStatus && rowGroupNode && row.isAggregate) {
+            const { fullColumnFieldData } = tableInternalData;
+            const { computeRowGroupOpts } = $table.getComputeMaps();
+            const rowGroupOpts = computeRowGroupOpts.value;
+            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(params, [
             h('span', {
@@ -380,39 +413,79 @@ export const Cell = {
             ])
         ]);
     },
-    renderTreeCell(params) {
-        return Cell.renderTreeIcon(params, Cell.renderDefaultCell(params));
+    renderDeepCell(params) {
+        return Cell.renderDeepNodeBtn(params, Cell.renderDefaultCell(params));
     },
     renderDefaultFooter(params) {
         return getFooterContent(params);
     },
     /**
-     * 树节点
+     * 行分组
      */
-    renderTreeIcon(params, cellVNodes) {
+    renderRowGroupBtn(params, cellVNodes) {
+        const { $table } = params;
+        const tableReactData = $table.reactData;
+        const tableInternalData = $table.internalData;
+        const { row, level } = params;
+        const { computeRowGroupOpts } = $table.getComputeMaps();
+        const { rowGroupExpandedFlag } = tableReactData;
+        const { rowGroupExpandedMaps } = tableInternalData;
+        const rowGroupOpts = computeRowGroupOpts.value;
+        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',
+                onClick(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)
+        ]);
+    },
+    /**
+     * 树
+     */
+    renderTreeNodeBtn(params, cellVNodes) {
         const { $table, isHidden } = params;
         const tableReactData = $table.reactData;
         const tableInternalData = $table.internalData;
+        const { row, column, level } = params;
+        const { slots } = column;
+        const iconSlot = slots ? slots.icon : null;
+        if (iconSlot) {
+            return $table.callSlot(iconSlot, params);
+        }
         const { computeTreeOpts } = $table.getComputeMaps();
         const { treeExpandedFlag } = tableReactData;
         const { fullAllDataRowIdData, treeExpandedMaps, treeExpandLazyLoadedMaps } = tableInternalData;
         const treeOpts = computeTreeOpts.value;
-        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];
         const hasChild = rowChilds && rowChilds.length;
-        const iconSlot = slots ? slots.icon : null;
         let hasLazyChilds = false;
         let isActive = false;
         let isLazyLoading = false;
         let isLazyLoaded = false;
         const ons = {};
-        if (iconSlot) {
-            return $table.callSlot(iconSlot, params);
-        }
         if (!isHidden) {
             const rowid = getRowid($table, row);
             isActive = !!treeExpandedFlag && !!treeExpandedMaps[rowid];
@@ -428,29 +501,41 @@ export const Cell = {
                 $table.triggerTreeExpandEvent(evnt, params);
             };
         }
-        return [
-            h('div', {
-                class: ['vxe-cell--tree-node', {
-                        'is--active': isActive
-                    }],
-                style: {
+        return h('div', {
+            class: ['vxe-cell--tree-node', {
+                    'is--active': isActive
+                }],
+            style: padding && indent
+                ? {
                     paddingLeft: `${level * indent}px`
                 }
-            }, [
-                showIcon && (lazy ? (isLazyLoaded ? hasChild : (hasChild || hasLazyChilds)) : hasChild)
-                    ? [
-                        h('div', Object.assign({ class: 'vxe-tree--btn-wrapper' }, 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))]
-                            })
-                        ])
-                    ]
-                    : null,
-                h('div', {
-                    class: 'vxe-tree-cell'
-                }, cellVNodes)
-            ])
-        ];
+                : undefined
+        }, [
+            showIcon && (lazy ? (isLazyLoaded ? hasChild : (hasChild || hasLazyChilds)) : hasChild)
+                ? [
+                    h('div', Object.assign({ class: 'vxe-cell--tree-btn' }, ons), [
+                        h('i', {
+                            class: isLazyLoading ? (iconLoaded || getIcon().TABLE_TREE_LOADED) : (isActive ? (iconOpen || getIcon().TABLE_TREE_OPEN) : (iconClose || getIcon().TABLE_TREE_CLOSE))
+                        })
+                    ])
+                ]
+                : null,
+            h('div', {
+                class: 'vxe-tree-cell'
+            }, cellVNodes)
+        ]);
+    },
+    /**
+     * 层级节点。
+     * 行分组、树结构
+     */
+    renderDeepNodeBtn(params, cellVNodes) {
+        const { row, column } = params;
+        const { rowGroupNode } = column;
+        if (rowGroupNode && row.isAggregate) {
+            return [Cell.renderRowGroupBtn(params, cellVNodes)];
+        }
+        return [Cell.renderTreeNodeBtn(params, cellVNodes)];
     },
     /**
      * 序号
@@ -478,8 +563,8 @@ export const Cell = {
             h('span', `${formatText(seqMethod ? seqMethod(params) : treeConfig ? seq : (seqOpts.startIndex || 0) + seq, 1)}`)
         ]);
     },
-    renderTreeIndexCell(params) {
-        return Cell.renderTreeIcon(params, Cell.renderSeqCell(params));
+    renderDeepIndexCell(params) {
+        return Cell.renderDeepNodeBtn(params, Cell.renderSeqCell(params));
     },
     /**
      * 单选
@@ -509,7 +594,7 @@ export const Cell = {
         const defaultSlot = slots ? slots.default : null;
         const radioSlot = slots ? slots.radio : null;
         const isChecked = $table.eqRow(row, selectRadioRow);
-        const isVisible = !visibleMethod || visibleMethod({ row });
+        const isVisible = !visibleMethod || visibleMethod({ $table, row });
         let isDisabled = !!checkMethod;
         let ons;
         if (!isHidden) {
@@ -521,7 +606,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 });
@@ -546,8 +631,8 @@ export const Cell = {
                     }] }, ons), radioVNs)
         ]);
     },
-    renderTreeRadioCell(params) {
-        return Cell.renderTreeIcon(params, Cell.renderRadioCell(params));
+    renderDeepRadioCell(params) {
+        return Cell.renderDeepNodeBtn(params, Cell.renderRadioCell(params));
     },
     /**
      * 多选
@@ -607,7 +692,7 @@ export const Cell = {
         const tableReactData = $table.reactData;
         const tableInternalData = $table.internalData;
         const { treeConfig } = tableProps;
-        const { updateCheckboxFlag } = tableReactData;
+        const { updateCheckboxFlag, isRowGroupStatus } = tableReactData;
         const { selectCheckboxMaps, treeIndeterminateRowMaps } = tableInternalData;
         const { computeCheckboxOpts } = $table.getComputeMaps();
         const checkboxOpts = computeCheckboxOpts.value;
@@ -617,7 +702,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) {
@@ -629,9 +714,9 @@ export const Cell = {
                 }
             };
             if (checkMethod) {
-                isDisabled = !checkMethod({ row });
+                isDisabled = !checkMethod({ $table, row });
             }
-            if (treeConfig) {
+            if (treeConfig || isRowGroupStatus) {
                 indeterminate = !!treeIndeterminateRowMaps[rowid];
             }
         }
@@ -659,8 +744,8 @@ export const Cell = {
                     }] }, ons), checkVNs)
         ]);
     },
-    renderTreeSelectionCell(params) {
-        return Cell.renderTreeIcon(params, Cell.renderCheckboxCell(params));
+    renderDeepSelectionCell(params) {
+        return Cell.renderDeepNodeBtn(params, Cell.renderCheckboxCell(params));
     },
     renderCheckboxCellByProp(params) {
         const { $table, row, column, isHidden } = params;
@@ -668,7 +753,7 @@ export const Cell = {
         const tableReactData = $table.reactData;
         const tableInternalData = $table.internalData;
         const { treeConfig } = tableProps;
-        const { updateCheckboxFlag } = tableReactData;
+        const { updateCheckboxFlag, isRowGroupStatus } = tableReactData;
         const { treeIndeterminateRowMaps } = tableInternalData;
         const { computeCheckboxOpts } = $table.getComputeMaps();
         const checkboxOpts = computeCheckboxOpts.value;
@@ -679,7 +764,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) {
@@ -691,9 +776,9 @@ export const Cell = {
                 }
             };
             if (checkMethod) {
-                isDisabled = !checkMethod({ row });
+                isDisabled = !checkMethod({ $table, row });
             }
-            if (treeConfig) {
+            if (treeConfig || isRowGroupStatus) {
                 isIndeterminate = !!treeIndeterminateRowMaps[rowid];
             }
         }
@@ -721,15 +806,17 @@ export const Cell = {
                     }] }, ons), checkVNs)
         ]);
     },
-    renderTreeSelectionCellByProp(params) {
-        return Cell.renderTreeIcon(params, Cell.renderCheckboxCellByProp(params));
+    renderDeepSelectionCellByProp(params) {
+        return Cell.renderDeepNodeBtn(params, Cell.renderCheckboxCellByProp(params));
     },
     /**
      * 展开行
      */
     renderExpandCell(params) {
         const { $table, isHidden, row, column } = params;
+        const tableReactData = $table.reactData;
         const tableInternalData = $table.internalData;
+        const { isRowGroupStatus } = tableReactData;
         const { rowExpandedMaps, rowExpandLazyLoadedMaps } = tableInternalData;
         const { computeExpandOpts } = $table.getComputeMaps();
         const expandOpts = computeExpandOpts.value;
@@ -739,6 +826,9 @@ export const Cell = {
         const iconSlot = slots ? slots.icon : null;
         let isActive = false;
         let isLazyLoading = false;
+        if (isRowGroupStatus && row.isAggregate) {
+            return renderCellBaseVNs(params, []);
+        }
         if (iconSlot) {
             return renderCellBaseVNs(params, $table.callSlot(iconSlot, params));
         }
@@ -809,8 +899,8 @@ export const Cell = {
             })
         ]);
     },
-    renderTreeHTMLCell(params) {
-        return Cell.renderTreeIcon(params, Cell.renderHTMLCell(params));
+    renderDeepHTMLCell(params) {
+        return Cell.renderDeepNodeBtn(params, Cell.renderHTMLCell(params));
     },
     /**
      * 排序和筛选
@@ -943,8 +1033,8 @@ export const Cell = {
         const { editRender } = column;
         return Cell.runRenderer(params, isEnableConf(editRender) && actived && actived.row === params.row);
     },
-    renderTreeRowEdit(params) {
-        return Cell.renderTreeIcon(params, Cell.renderRowEdit(params));
+    renderDeepRowEdit(params) {
+        return Cell.renderDeepNodeBtn(params, Cell.renderRowEdit(params));
     },
     // 单元格编辑模式
     renderCellEdit(params) {
@@ -955,8 +1045,8 @@ export const Cell = {
         const { editRender } = column;
         return Cell.runRenderer(params, isEnableConf(editRender) && actived && actived.row === params.row && actived.column === params.column);
     },
-    renderTreeCellEdit(params) {
-        return Cell.renderTreeIcon(params, Cell.renderCellEdit(params));
+    renderDeepCellEdit(params) {
+        return Cell.renderDeepNodeBtn(params, Cell.renderCellEdit(params));
     },
     runRenderer(params, isEdit) {
         const { $table, column } = params;

package/es/table/src/column.js

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

package/es/table/src/columnInfo.js

@@ -76,6 +76,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,

package/es/table/src/emits.js

@@ -41,6 +41,7 @@ export default [
     'resizable-change',
     'column-resizable-change',
     'row-resizable-change',
+    'toggle-row-group-expand',
     'toggle-row-expand',
     'toggle-tree-expand',
     'menu-click',

package/es/table/src/props.js

@@ -180,19 +180,21 @@ export default {
     syncResize: [Boolean, String, Number],
     // 响应式布局配置项
     resizeConfig: Object,
-    // 列配置信息
+    // 列配置项
     columnConfig: Object,
-    // 当前列配置信息
+    // 当前列配置项
     currentColumnConfig: Object,
-    // 单元格配置信息
+    // 单元格配置项
     cellConfig: Object,
-    // 表头单元格配置信息
+    // 表头单元格配置项
     headerCellConfig: Object,
-    // 表尾单元格配置信息
+    // 表尾单元格配置项
     footerCellConfig: Object,
-    // 行配置信息
+    // 行配置项
     rowConfig: Object,
-    // 当前行配置信息
+    // 行分组配置项
+    rowGroupConfig: Object,
+    // 当前行配置项
     currentRowConfig: Object,
     // 已废弃，被 rowDragConfig 替换
     dragConfig: Object,