vxe-table 4.7.41 → 4.7.43

package/es/table/module/custom/panel.js

@@ -15,6 +15,7 @@ export default defineComponent({
     },
     setup(props) {
         const VxeUIModalComponent = VxeUI.getComponent('VxeModal');
+        const VxeUIDrawerComponent = VxeUI.getComponent('VxeDrawer');
         const VxeUIButtonComponent = VxeUI.getComponent('VxeButton');
         const VxeUIInputComponent = VxeUI.getComponent('VxeInput');
         const VxeUITooltipComponent = VxeUI.getComponent('VxeTooltip');
@@ -459,9 +460,12 @@ export default defineComponent({
             const { customStore } = props;
             const { customColumnList } = reactData;
             const customOpts = computeCustomOpts.value;
-            const { modalOptions, allowVisible, allowSort, allowFixed, allowResizable, checkMethod, visibleMethod } = customOpts;
+            const { modalOptions, drawerOptions, allowVisible, allowSort, allowFixed, allowResizable, checkMethod, visibleMethod } = customOpts;
             const columnOpts = computeColumnOpts.value;
+            const { maxFixedSize } = columnOpts;
+            const { mode } = customOpts;
             const modalOpts = Object.assign({}, modalOptions);
+            const drawerOpts = Object.assign({}, drawerOptions);
             const isMaxFixedColumn = computeIsMaxFixedColumn.value;
             const trVNs = [];
             XEUtils.eachTree(customColumnList, (column, index, items, path, parent) => {
@@ -580,165 +584,187 @@ export default defineComponent({
             });
             const isAllChecked = customStore.isAll;
             const isAllIndeterminate = customStore.isIndeterminate;
-            return VxeUIModalComponent
-                ? h(VxeUIModalComponent, {
-                    key: 'popup',
-                    className: ['vxe-table-custom-popup-wrapper', 'vxe-table--ignore-clear', modalOpts.className || ''].join(' '),
-                    modelValue: customStore.visible,
-                    title: modalOpts.title || getI18n('vxe.custom.cstmTitle'),
-                    width: modalOpts.width || '50vw',
-                    minWidth: modalOpts.minWidth || 700,
-                    height: modalOpts.height || '50vh',
-                    minHeight: modalOpts.minHeight || 400,
-                    mask: true,
-                    lockView: true,
-                    showFooter: true,
-                    resize: true,
-                    escClosable: true,
-                    destroyOnClose: true,
-                    'onUpdate:modelValue'(value) {
-                        customStore.visible = value;
-                    }
-                }, {
-                    default: () => {
-                        return h('div', {
-                            ref: bodyElemRef,
-                            class: 'vxe-table-custom-popup--body'
+            const scopedSlots = {
+                default: () => {
+                    return h('div', {
+                        ref: bodyElemRef,
+                        class: 'vxe-table-custom-popup--body'
+                    }, [
+                        h('div', {
+                            class: 'vxe-table-custom-popup--table-wrapper'
                         }, [
-                            h('div', {
-                                class: 'vxe-table-custom-popup--table-wrapper'
-                            }, [
-                                h('table', {}, [
-                                    h('colgroup', {}, [
+                            h('table', {}, [
+                                h('colgroup', {}, [
+                                    allowVisible
+                                        ? h('col', {
+                                            style: {
+                                                width: '80px'
+                                            }
+                                        })
+                                        : createCommentVNode(),
+                                    allowSort
+                                        ? h('col', {
+                                            style: {
+                                                width: '80px'
+                                            }
+                                        })
+                                        : createCommentVNode(),
+                                    h('col', {
+                                        style: {
+                                            minWidth: '120px'
+                                        }
+                                    }),
+                                    allowResizable
+                                        ? h('col', {
+                                            style: {
+                                                width: '140px'
+                                            }
+                                        })
+                                        : createCommentVNode(),
+                                    allowFixed
+                                        ? h('col', {
+                                            style: {
+                                                width: '200px'
+                                            }
+                                        })
+                                        : createCommentVNode()
+                                ]),
+                                h('thead', {}, [
+                                    h('tr', {}, [
                                         allowVisible
-                                            ? h('col', {
-                                                style: {
-                                                    width: '80px'
-                                                }
-                                            })
+                                            ? h('th', {}, [
+                                                h('div', {
+                                                    class: ['vxe-table-custom--checkbox-option', {
+                                                            'is--checked': isAllChecked,
+                                                            'is--indeterminate': isAllIndeterminate
+                                                        }],
+                                                    title: getI18n('vxe.table.allTitle'),
+                                                    onClick: allCustomEvent
+                                                }, [
+                                                    h('span', {
+                                                        class: ['vxe-checkbox--icon', isAllIndeterminate ? getIcon().TABLE_CHECKBOX_INDETERMINATE : (isAllChecked ? getIcon().TABLE_CHECKBOX_CHECKED : getIcon().TABLE_CHECKBOX_UNCHECKED)]
+                                                    }),
+                                                    h('span', {
+                                                        class: 'vxe-checkbox--label'
+                                                    }, getI18n('vxe.toolbar.customAll'))
+                                                ])
+                                            ])
                                             : createCommentVNode(),
                                         allowSort
-                                            ? h('col', {
-                                                style: {
-                                                    width: '80px'
-                                                }
-                                            })
+                                            ? h('th', {}, [
+                                                h('span', {
+                                                    class: 'vxe-table-custom-popup--table-sort-help-title'
+                                                }, getI18n('vxe.custom.setting.colSort')),
+                                                VxeUITooltipComponent
+                                                    ? h(VxeUITooltipComponent, {
+                                                        enterable: true,
+                                                        content: getI18n('vxe.custom.setting.sortHelpTip')
+                                                    }, {
+                                                        default: () => {
+                                                            return h('i', {
+                                                                class: 'vxe-table-custom-popup--table-sort-help-icon vxe-icon-question-circle-fill'
+                                                            });
+                                                        }
+                                                    })
+                                                    : createCommentVNode()
+                                            ])
                                             : createCommentVNode(),
-                                        h('col', {
-                                            style: {
-                                                minWidth: '120px'
-                                            }
-                                        }),
+                                        h('th', {}, getI18n('vxe.custom.setting.colTitle')),
                                         allowResizable
-                                            ? h('col', {
-                                                style: {
-                                                    width: '140px'
-                                                }
-                                            })
+                                            ? h('th', {}, getI18n('vxe.custom.setting.colResizable'))
                                             : createCommentVNode(),
                                         allowFixed
-                                            ? h('col', {
-                                                style: {
-                                                    width: '200px'
-                                                }
-                                            })
+                                            ? h('th', {}, getI18n(`vxe.custom.setting.${maxFixedSize ? 'colFixedMax' : 'colFixed'}`, [maxFixedSize]))
                                             : createCommentVNode()
-                                    ]),
-                                    h('thead', {}, [
-                                        h('tr', {}, [
-                                            allowVisible
-                                                ? h('th', {}, [
-                                                    h('div', {
-                                                        class: ['vxe-table-custom--checkbox-option', {
-                                                                'is--checked': isAllChecked,
-                                                                'is--indeterminate': isAllIndeterminate
-                                                            }],
-                                                        title: getI18n('vxe.table.allTitle'),
-                                                        onClick: allCustomEvent
-                                                    }, [
-                                                        h('span', {
-                                                            class: ['vxe-checkbox--icon', isAllIndeterminate ? getIcon().TABLE_CHECKBOX_INDETERMINATE : (isAllChecked ? getIcon().TABLE_CHECKBOX_CHECKED : getIcon().TABLE_CHECKBOX_UNCHECKED)]
-                                                        }),
-                                                        h('span', {
-                                                            class: 'vxe-checkbox--label'
-                                                        }, getI18n('vxe.toolbar.customAll'))
-                                                    ])
-                                                ])
-                                                : createCommentVNode(),
-                                            allowSort
-                                                ? h('th', {}, [
-                                                    h('span', {
-                                                        class: 'vxe-table-custom-popup--table-sort-help-title'
-                                                    }, getI18n('vxe.custom.setting.colSort')),
-                                                    VxeUITooltipComponent
-                                                        ? h(VxeUITooltipComponent, {
-                                                            enterable: true,
-                                                            content: getI18n('vxe.custom.setting.sortHelpTip')
-                                                        }, {
-                                                            default: () => {
-                                                                return h('i', {
-                                                                    class: 'vxe-table-custom-popup--table-sort-help-icon vxe-icon-question-circle-fill'
-                                                                });
-                                                            }
-                                                        })
-                                                        : createCommentVNode()
-                                                ])
-                                                : createCommentVNode(),
-                                            h('th', {}, getI18n('vxe.custom.setting.colTitle')),
-                                            allowResizable
-                                                ? h('th', {}, getI18n('vxe.custom.setting.colResizable'))
-                                                : createCommentVNode(),
-                                            allowFixed
-                                                ? h('th', {}, getI18n('vxe.custom.setting.colFixed', [columnOpts.maxFixedSize || 0]))
-                                                : createCommentVNode()
-                                        ])
-                                    ]),
-                                    h(TransitionGroup, {
-                                        class: 'vxe-table-custom--body',
-                                        tag: 'tbody',
-                                        name: 'vxe-table-custom--list'
-                                    }, {
-                                        default: () => trVNs
-                                    })
-                                ])
-                            ]),
-                            h('div', {
-                                ref: dragHintElemRef,
-                                class: 'vxe-table-custom-popup--drag-hint'
-                            }, getI18n('vxe.custom.cstmDragTarget', [dragColumn.value ? dragColumn.value.getTitle() : '']))
-                        ]);
-                    },
-                    footer: () => {
-                        return h('div', {
-                            class: 'vxe-table-custom-popup--footer'
-                        }, [
-                            VxeUIButtonComponent
-                                ? h(VxeUIButtonComponent, {
-                                    content: customOpts.resetButtonText || getI18n('vxe.custom.cstmRestore'),
-                                    onClick: resetCustomEvent
-                                })
-                                : createCommentVNode(),
-                            VxeUIButtonComponent
-                                ? h(VxeUIButtonComponent, {
-                                    content: customOpts.resetButtonText || getI18n('vxe.custom.cstmCancel'),
-                                    onClick: cancelCustomEvent
-                                })
-                                : createCommentVNode(),
-                            VxeUIButtonComponent
-                                ? h(VxeUIButtonComponent, {
-                                    status: 'primary',
-                                    content: customOpts.confirmButtonText || getI18n('vxe.custom.cstmConfirm'),
-                                    onClick: confirmCustomEvent
+                                    ])
+                                ]),
+                                h(TransitionGroup, {
+                                    class: 'vxe-table-custom--body',
+                                    tag: 'tbody',
+                                    name: 'vxe-table-custom--list'
+                                }, {
+                                    default: () => trVNs
                                 })
-                                : createCommentVNode()
-                        ]);
+                            ])
+                        ]),
+                        h('div', {
+                            ref: dragHintElemRef,
+                            class: 'vxe-table-custom-popup--drag-hint'
+                        }, getI18n('vxe.custom.cstmDragTarget', [dragColumn.value ? dragColumn.value.getTitle() : '']))
+                    ]);
+                },
+                footer: () => {
+                    return h('div', {
+                        class: 'vxe-table-custom-popup--footer'
+                    }, [
+                        VxeUIButtonComponent
+                            ? h(VxeUIButtonComponent, {
+                                content: customOpts.resetButtonText || getI18n('vxe.custom.cstmRestore'),
+                                onClick: resetCustomEvent
+                            })
+                            : createCommentVNode(),
+                        VxeUIButtonComponent
+                            ? h(VxeUIButtonComponent, {
+                                content: customOpts.resetButtonText || getI18n('vxe.custom.cstmCancel'),
+                                onClick: cancelCustomEvent
+                            })
+                            : createCommentVNode(),
+                        VxeUIButtonComponent
+                            ? h(VxeUIButtonComponent, {
+                                status: 'primary',
+                                content: customOpts.confirmButtonText || getI18n('vxe.custom.cstmConfirm'),
+                                onClick: confirmCustomEvent
+                            })
+                            : createCommentVNode()
+                    ]);
+                }
+            };
+            if (mode === 'drawer') {
+                return VxeUIDrawerComponent
+                    ? h(VxeUIDrawerComponent, {
+                        key: 'drawer',
+                        className: ['vxe-table-custom-drawer-wrapper', 'vxe-table--ignore-clear', drawerOpts.className || ''].join(' '),
+                        modelValue: customStore.visible,
+                        title: drawerOpts.title || getI18n('vxe.custom.cstmTitle'),
+                        width: drawerOpts.width || Math.min(880, document.documentElement.clientWidth),
+                        position: drawerOpts.position,
+                        escClosable: !!drawerOpts.escClosable,
+                        destroyOnClose: true,
+                        showFooter: true,
+                        'onUpdate:modelValue'(value) {
+                            customStore.visible = value;
+                        }
+                    }, scopedSlots)
+                    : createCommentVNode();
+            }
+            return VxeUIModalComponent
+                ? h(VxeUIModalComponent, {
+                    key: 'modal',
+                    className: ['vxe-table-custom-modal-wrapper', 'vxe-table--ignore-clear', modalOpts.className || ''].join(' '),
+                    modelValue: customStore.visible,
+                    title: modalOpts.title || getI18n('vxe.custom.cstmTitle'),
+                    width: modalOpts.width || Math.min(880, document.documentElement.clientWidth),
+                    minWidth: modalOpts.minWidth || 700,
+                    height: modalOpts.height || Math.min(680, document.documentElement.clientHeight),
+                    minHeight: modalOpts.minHeight || 400,
+                    showZoom: modalOpts.showZoom,
+                    showMaximize: modalOpts.showMaximize,
+                    showMinimize: modalOpts.showMinimize,
+                    mask: modalOpts.mask,
+                    lockView: modalOpts.lockView,
+                    resize: modalOpts.resize,
+                    escClosable: !!modalOpts.escClosable,
+                    destroyOnClose: true,
+                    showFooter: true,
+                    'onUpdate:modelValue'(value) {
+                        customStore.visible = value;
                     }
-                })
+                }, scopedSlots)
                 : createCommentVNode();
         };
         const renderVN = () => {
             const customOpts = computeCustomOpts.value;
-            if (customOpts.mode === 'popup') {
+            if (['modal', 'drawer', 'popup'].includes(`${customOpts.mode}`)) {
                 return renderPopupPanel();
             }
             return renderSimplePanel();

package/es/table/render/index.js

@@ -258,7 +258,7 @@ function nativeEditRender(renderOpts, params) {
         h(name, Object.assign(Object.assign(Object.assign({ class: `vxe-default-${name}` }, getNativeAttrs(renderOpts)), { value: cellValue }), getNativeEditOns(renderOpts, params)))
     ];
 }
-function defaultCellRender(renderOpts, params) {
+function buttonCellRender(renderOpts, params) {
     return [
         h(getDefaultComponent(renderOpts), Object.assign(Object.assign({}, getCellEditProps(renderOpts, params, null)), getComponentOns(renderOpts, params)))
     ];
@@ -270,6 +270,14 @@ function defaultEditRender(renderOpts, params) {
         h(getDefaultComponent(renderOpts), Object.assign(Object.assign({}, getCellEditProps(renderOpts, params, cellValue)), getEditOns(renderOpts, params)))
     ];
 }
+function radioAndCheckboxEditRender(renderOpts, params) {
+    const { options } = renderOpts;
+    const { row, column } = params;
+    const cellValue = getCellValue(row, column);
+    return [
+        h(getDefaultComponent(renderOpts), Object.assign(Object.assign({ options }, getCellEditProps(renderOpts, params, cellValue)), getEditOns(renderOpts, params)))
+    ];
+}
 /**
  * 已废弃
  * @deprecated
@@ -525,7 +533,7 @@ renderer.mixin({
         autofocus: '.vxe-textarea--inner'
     },
     VxeButton: {
-        renderDefault: defaultCellRender
+        renderDefault: buttonCellRender
     },
     VxeButtonGroup: {
         renderDefault(renderOpts, params) {
@@ -553,6 +561,12 @@ renderer.mixin({
         defaultFilterMethod: handleFilterMethod,
         exportMethod: handleExportSelectMethod
     },
+    VxeRadioGroup: {
+        renderDefault: radioAndCheckboxEditRender
+    },
+    VxeCheckboxGroup: {
+        renderDefault: radioAndCheckboxEditRender
+    },
     VxeSwitch: {
         autofocus: '.vxe-switch--button',
         renderEdit: defaultEditRender,

package/es/table/src/table.js

@@ -483,7 +483,7 @@ export default defineComponent({
             let fixedSize = 0;
             // 只判断第一层
             collectColumn.forEach((column) => {
-                if (column.fixed) {
+                if (column.renderFixed) {
                     fixedSize++;
                 }
             });
@@ -822,27 +822,29 @@ export default defineComponent({
             return num;
         };
         const handleCustomRestore = (storeData) => {
-            const { tableFullColumn } = internalData;
             let { collectColumn } = internalData;
             const { resizableData, sortData, visibleData, fixedData } = storeData;
             let hasCustomSort = false;
             // 处理还原
             if (resizableData || sortData || visibleData || fixedData) {
-                tableFullColumn.forEach(column => {
+                XEUtils.eachTree(collectColumn, (column, index, items, path, parent) => {
                     const colKey = column.getKey();
+                    // 支持一级
+                    if (!parent) {
+                        if (fixedData && fixedData[colKey]) {
+                            column.fixed = fixedData[colKey];
+                        }
+                        if (sortData && XEUtils.isNumber(sortData[colKey])) {
+                            hasCustomSort = true;
+                            column.renderSortNumber = sortData[colKey];
+                        }
+                    }
                     if (resizableData && XEUtils.isNumber(resizableData[colKey])) {
                         column.resizeWidth = resizableData[colKey];
                     }
                     if (visibleData && XEUtils.isBoolean(visibleData[colKey])) {
                         column.visible = visibleData[colKey];
                     }
-                    if (fixedData && fixedData[colKey]) {
-                        column.fixed = fixedData[colKey];
-                    }
-                    if (sortData && XEUtils.isNumber(sortData[colKey])) {
-                        hasCustomSort = true;
-                        column.renderSortNumber = sortData[colKey];
-                    }
                 });
                 // 如果自定义了顺序
                 if (hasCustomSort) {
@@ -3241,14 +3243,13 @@ export default defineComponent({
                 const targetColumn = getRootColumn($xeTable, column);
                 const isMaxFixedColumn = computeIsMaxFixedColumn.value;
                 const columnOpts = computeColumnOpts.value;
-                const { maxFixedSize } = columnOpts;
                 if (targetColumn && targetColumn.fixed !== fixed) {
                     // 是否超过最大固定列数量
                     if (!targetColumn.fixed && isMaxFixedColumn) {
                         if (VxeUI.modal) {
                             VxeUI.modal.message({
                                 status: 'error',
-                                content: getI18n('vxe.table.maxFixedCol', [maxFixedSize])
+                                content: getI18n('vxe.table.maxFixedCol', [columnOpts.maxFixedSize])
                             });
                         }
                         return nextTick();
@@ -4533,7 +4534,7 @@ export default defineComponent({
                 let hasFixedt = 0;
                 let hasVisible = 0;
                 XEUtils.eachTree(collectColumn, (column, index, items, path, parent) => {
-                    // 排序只支持一级
+                    // 只支持一级
                     if (!parent) {
                         collectColumn.forEach((column) => {
                             const colKey = column.getKey();
@@ -4542,6 +4543,13 @@ export default defineComponent({
                                 sortData[colKey] = column.renderSortNumber;
                             }
                         });
+                        if (column.fixed && column.fixed !== column.defaultFixed) {
+                            const colKey = column.getKey();
+                            if (colKey) {
+                                hasFixedt = 1;
+                                fixedData[colKey] = column.fixed;
+                            }
+                        }
                     }
                     if (column.resizeWidth) {
                         const colKey = column.getKey();
@@ -4550,13 +4558,6 @@ export default defineComponent({
                             resizableData[colKey] = column.renderWidth;
                         }
                     }
-                    if (column.fixed && column.fixed !== column.defaultFixed) {
-                        const colKey = column.getKey();
-                        if (colKey) {
-                            hasFixedt = 1;
-                            fixedData[colKey] = column.fixed;
-                        }
-                    }
                     if (!checkMethod || checkMethod({ column })) {
                         if (!column.visible && column.defaultVisible) {
                             const colKey = column.getKey();

package/es/table/style.css

@@ -352,6 +352,9 @@
   outline: none;
 }
 .vxe-table-custom--footer button:hover {
+  color: var(--vxe-ui-font-primary-lighten-color);
+}
+.vxe-table-custom--footer .btn--confirm {
   color: var(--vxe-ui-font-primary-color);
 }